悬停时的 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中文网其他相关文章！
