3D旋轉切換是一種常用的網頁特效,可以讓頁面內容更加生動有趣。下面是一段3D旋轉切換的HTML代碼:
<div class="rotate-container"> <div class="rotate-card"> <div class="front"> <img src="front_img.jpg" alt="front image"> </div> <div class="back"> <img src="back_img.jpg" alt="back image"> </div> </div> </div>
上述代碼包含了一個包含旋轉卡片的容器div.rotate-container和一個卡片div.rotate-card,其中包含了一個正面元素div.front和一個背面元素div.back。通過設置transform屬性的rotateY值可以實現卡片的3D旋轉效果:
.rotate-card { position: relative; width: 300px; height: 200px; transform-style: preserve-3d; transition: transform .5s; } .rotate-card:hover { transform: rotateY(180deg); } .front, .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } .back { transform: rotateY(180deg); }
通過設置rotateY值,可以讓卡片在hover時旋轉180度,顯示背面元素。backface-visibility屬性用于防止卡片旋轉到背面后頭部文字等元素的反轉。
上一篇html5 賀卡 代碼
下一篇畫橢圓css