3D正方體旋轉相冊是一種非常炫酷的相冊效果,可以讓你的網頁看起來更加生動活潑。下面是一個簡單的HTML代碼,幫助你實現這個效果。
<div class="cube"> <figure class="front"> <img src="image1.jpg" alt=""> <figcaption>圖片1</figcaption> </figure> <figure class="back"> <img src="image2.jpg" alt=""> <figcaption>圖片2</figcaption> </figure> <figure class="right"> <img src="image3.jpg" alt=""> <figcaption>圖片3</figcaption> </figure> <figure class="left"> <img src="image4.jpg" alt=""> <figcaption>圖片4</figcaption> </figure> <figure class="top"> <img src="image5.jpg" alt=""> <figcaption>圖片5</figcaption> </figure> <figure class="bottom"> <img src="image6.jpg" alt=""> <figcaption>圖片6</figcaption> </figure> </div>
以上代碼中,<div>標簽中指定了一個class="cube",這是我們要實現的3D正方體旋轉效果的關鍵。<figure>標簽中定義了六個面,分別對應六張圖片。通過CSS的transform屬性對這個整體圖片進行旋轉,即可實現3D效果。