懸停時的CSS 可翻轉3D 卡片效果
在本教程中，我們的目標是僅使用CSS 實現3D 卡片翻轉效果。將滑鼠懸停在卡片上時，卡片會從正面平滑地旋轉到背面。
程式碼實作：
<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>說明：
以上是如何僅使用 CSS 在懸停時旋轉 3D CSS 卡？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
