如何使用纯 CSS 轻松翻转 3D 卡？

使用 CSS 轻松翻转 3D 卡片

具有引人注目的 3D 效果的翻转卡片可以提升用户体验。在本文中，我们将深入研究仅使用 CSS 创建悬停激活的卡片翻转动画。

首先，让我们看一个示例代码，它在保持预期效果的同时简化了实现：

.card {<br> 位置：相对；<br> 宽度：50vh；<br> 高度: 80vh;<br> 视角: 500px;<br> 边距: 10vh auto 50vh;<br>}<p>.front,<br>.back {<br> 位置: 绝对;<br> 宽度: 100%；<br> 高度：100%；<br> 过渡：变换 1s；<br> 背面可见性：隐藏；<br> 变换样式：保留 3d；<br>}</p>
<p>。前面 {<br> 背景颜色：#66ccff;<br>}</p>
<p>.back {<br> 背景颜色：#dd8800;<br> 变换：rotateY(180deg);<br>}</p>
<p>.card:hover .front {<br>变换：rotateY(180deg);<br>}</p>
<p>.card:hover .back {<br>变换：rotateY(360deg);<br>}

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

此代码创建一张具有两个面的卡片：正面和背面。悬停时会触发翻转效果。将鼠标悬停在卡片上会导致正面旋转 180 度，背面旋转 360 度。

这个动画的关键在于 CSS 属性的组合，如透视、变换样式、变换和过渡。这些属性共同创建 3D 对象的错觉。

通过实现此代码，您现在可以在网站上创建美观且引人入胜的 3D 卡片翻转效果，从而增强视觉吸引力和用户交互。