卡片翻转效果通过CSS的transform和animation实现，1. 使用rotateY配合transform-style: preserve-3d创建3D环境；2. HTML结构包含外层容器与正背面元素；3. 设置perspective增强立体感，backface-visibility隐藏背面；4. hover时触发rotateY旋转180度并添加transition实现平滑动画，最终完成流畅翻转效果。
卡片翻转效果是CSS中常见的交互设计，利用 transform 和 animation 可以轻松实现。核心在于使用 rotateY 配合 transform-style: preserve-3d 来创建3D翻转动画。下面是一个简单实用的实现方法。
1. HTML结构：创建翻转卡片容器
卡片通常由一个外层容器和两个面（正面、背面）组成：
<div class="card"> <div class="card-face front">正面内容</div> <div class="card-face back">背面内容</div> </div>
2. CSS基础样式与3D环境设置
为卡片设置基本尺寸，并启用3D变换空间：
.card {
width: 200px;
height: 300px;
position: relative;
perspective: 1000px; /* 创建3D透视感 */
}
<p>.card-face {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden; /<em> 隐藏背面不可见时的面 </em>/
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: white;
}</p><p>.front {
background: #3498db;
transform: rotateY(0deg); /<em> 初始状态不旋转 </em>/
}</p><p>.back {
background: #e74c3c;
transform: rotateY(180deg); /<em> 背面初始为翻转状态 </em>/
}</p>3. 添加翻转动画：hover触发rotateY变化
通过:hover状态让卡片翻转180度，正面隐藏，背面显示：
立即学习“前端免费学习笔记（深入）”；
.card:hover .front {
transform: rotateY(-180deg);
}
<p>.card:hover .back {
transform: rotateY(0deg);
}</p><p>.card-face {
transition: transform 0.6s ease-in-out; /<em> 平滑过渡动画 </em>/
}</p>注意：必须给 .card-face 添加 transition，才能看到动画效果。
4. 完整关键点说明
- perspective：加在父容器上，决定3D效果的“远近感”
- transform-style: preserve-3d：如果需要更复杂嵌套，可加在中间容器上
- backface-visibility: hidden：防止翻转过程中看到背面反向内容
- rotateY(180deg)：Y轴翻转，像翻书一样左右翻
基本上就这些。不复杂但容易忽略细节。只要结构清晰、3D属性设置正确，就能做出流畅的翻转效果。
