要实现卡片翻转效果，需结合CSS的perspective、transform-style和backface-visibility属性。1. 构建包含正反面的.card容器，设置perspective营造3D视觉；2. .card-face共用绝对定位与隐藏背面，front初始rotateY(0deg)，back为rotateY(180deg)；3. 通过@keyframes定义从0deg到180deg的rotateY动画，配合infinite alternate实现循环翻转；4. 添加ease-in-out缓动、hover触发或调整perspective值优化视觉体验。核心是preserve-3d保持3D空间，确保翻转流畅自然。
要实现卡片翻转效果，核心是利用 CSS 的 transform 和 perspective 属性配合 animation 来创建 3D 翻转动画。关键在于设置正确的 3D 空间和翻转轴。
1. 基本结构与样式
先构建一个包含正反面的卡片容器：
<div class="card"> <div class="card-face front">正面</div> <div class="card-face back">反面</div> </div>
为容器设置透视效果，让 3D 变化更真实：
- perspective：添加到父容器或卡片本身，控制 3D 距离感
- transform-style: preserve-3d：确保子元素在 3D 空间中渲染
- backface-visibility: hidden：隐藏翻转后看不见的一面
2. 关键 CSS 设置
以下是实现翻转的核心样式：
立即学习“前端免费学习笔记（深入）”；
.card {
width: 200px;
height: 300px;
position: relative;
perspective: 1000px;
animation: flip 3s infinite alternate;
}
.card-face {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
color: white;
}
.front {
background: #3498db;
transform: rotateY(0deg);
}
.back {
background: #e74c3c;
transform: rotateY(180deg);
}
3. 定义翻转动效
使用 @keyframes 创建动画，绕 Y 轴旋转 180 度：
@keyframes flip {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(180deg);
}
}
动画过程中，front 面从 0° 转到 180°，back 面也同步翻转但因背面不可见，正好在 180° 时显示其正面。
4. 提升视觉效果的小技巧
- 给 .card 添加 transform-style: preserve-3d，确保内部元素保持 3D 空间
- 调整 perspective 数值（如 800px~1200px）获得不同远近感
- 使用 ease-in-out 缓动让翻转更自然：
animation: flip 3s ease-in-out infinite alternate; - 可改为 hover 触发：
.card:hover { transform: rotateY(180deg); }并移除 animation
