如何使用CSS 翻轉3D 卡片
任務是僅使用CSS 創建3D 翻轉卡片翻轉效果，其中卡片翻轉
純CSS 翻轉效果
為了簡化實現，我們將使用以下CSS 代碼：
<code class="css">.card {
position: relative;
width: 50vh;
height: 80vh;
perspective: 500px;
margin: 10vh auto 50vh;
}
.front,
.back {
position: absolute;
width: 100%;
height: 100%;
transition: transform 1s;
backface-visibility: hidden;
transform-style: preserve-3d;
}
.front {
background-color: #66ccff;
}
.back {
background-color: #dd8800;
transform: rotateY(180deg);
}
.card:hover .front {
transform: rotateY(180deg);
}
.card:hover .back {
transform: rotateY(360deg);
}</code>說明
說明正面旋轉 180 度Y 軸，露出背面。
背面繞 Y 軸旋轉 360 度，完成翻轉。 這種僅 CSS 技術可以實現平滑且逼真的效果懸停時的 3D 卡片翻轉效果。以上是如何僅使用CSS實現3D卡片翻轉效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
