CSS旋轉相冊是一種展示圖片的特效,它能夠讓圖片在相冊中以不同的角度顯示,為用戶帶來更加立體的視覺感受。
要使用CSS旋轉相冊,首先需要了解其中的CSS屬性。下面是相關的CSS代碼:
.album { perspective: 1000px; } .picture { transform-style: preserve-3d; transform: translateZ(-100px); transition: transform 1s; } .picture:hover { transform: translateZ(-100px) rotateY(360deg); }
其中,perspective屬性設置相冊的景深,數值越小相片離相冊越近,數值越大就越遠。transform-style屬性定義了元素的子元素的3D轉換模式,preserve-3d則表示保存3D模式。transform屬性設置元素的轉換,通常使用translate、rotate和scale等函數。transition屬性設置元素過渡時間。
以上就是CSS旋轉相冊的主要代碼,將其應用于HTML頁面中即可展示出效果。