CSS3旋轉(zhuǎn)畫廊是一種炫酷的網(wǎng)頁渲染效果,它可以使網(wǎng)站更加生動(dòng)、智能化,吸引更多的訪客。以下是實(shí)現(xiàn)這種效果的CSS3代碼:
.gallery { position: relative; width: 400px; height: 400px; margin: 0 auto; perspective: 1000px; } .gallery figure { position: absolute; width: 100%; height: 100%; overflow: hidden; backface-visibility: hidden; transition: transform 1s; } .gallery figure img { width: 100%; height: 100%; object-fit: cover; transform-origin: center center; } .gallery figure:hover { transform: rotateY(90deg); } .gallery figure:nth-child(1) { transform: rotateY(0deg); } .gallery figure:nth-child(2) { transform: rotateY(40deg); } .gallery figure:nth-child(3) { transform: rotateY(80deg); } .gallery figure:nth-child(4) { transform: rotateY(120deg); } .gallery figure:nth-child(5) { transform: rotateY(160deg); } .gallery figure:nth-child(6) { transform: rotateY(200deg); } .gallery figure:nth-child(7) { transform: rotateY(240deg); } .gallery figure:nth-child(8) { transform: rotateY(280deg); } .gallery figure:nth-child(9) { transform: rotateY(320deg); }
上述代碼中,.gallery選擇器指向包含畫廊的容器,設(shè)置寬度、高度、居中對齊和透視點(diǎn)。.gallery figure選擇器指向單個(gè)圖像,旋轉(zhuǎn)操作僅在:hover狀態(tài)下發(fā)生。:hover CSS偽類在用戶懸停在該元素上時(shí)啟用樣式,即此處的旋轉(zhuǎn)操作。此外,這些圖像按順序旋轉(zhuǎn),可以在這里更改旋轉(zhuǎn)程度來實(shí)現(xiàn)不同的效果。