如何使用純 CSS 輕鬆翻轉 3D 卡？

使用 CSS 輕鬆翻轉 3D 卡

具有引人注目的 3D 效果的翻轉卡片可以提升使用者體驗。在本文中，我們將深入研究僅使用 CSS 建立懸停啟動的卡片翻轉動畫。

首先，讓我們來看一個範例程式碼，它在保持預期效果的同時簡化了實作：

.card {<br> 位置：相對；<br> 寬度：50vh；<br> 高度: 80vh;<br> 視角: 500px;<br> 邊距: 10vh auto 50vh;<br></p><p> <br>.front,<br>.back {<br> 位置: 絕對;<br> 寬度: 100%；<br> 高度：100%;<br> 過渡：變換1s；<br> 可見度：隱藏；<br> 變換樣式：保留3d;</p>}<p><br>。前面{<br> 背景顏色：#66ccff;</p>}<p><br>.back {<br> 背景顏色：#dd8800;<br> 變換：rotateY(180deg);</p>}<p> <br>.card:hover .front {<br>變換：rotateY(180deg);</p>}<p><br>.card:hover .back {<br>轉換：rotateY(360deg);<br> }

<div class="card"><br> <div class="前"><span>前< /span></div><br> <div class="back"><span>後</span></div><br>< /div>

此程式碼建立一張具有兩個面的卡片：正面和背面。懸停時會觸發翻轉效果。將滑鼠懸停在卡片上會導致正面旋轉 180 度，背面旋轉 360 度。

這個動畫的關鍵在於 CSS 屬性的組合，如透視、變換樣式、變換和轉換。這些屬性共同創造 3D 物件的錯覺。

透過實現此程式碼，您現在可以在網站上創建美觀且引人入勝的 3D 卡片翻轉效果，從而增強視覺吸引力和用戶互動。

以上是如何使用純 CSS 輕鬆翻轉 3D 卡？的詳細內容。更多資訊請關注PHP中文網其他相關文章！