答案是使用transition结合rotateY实现卡片翻转更高效。通过设置perspective和transform-style: preserve-3d，利用backface-visibility隐藏背面，hover时触发rotateY(180deg)并配合transition实现平滑翻转效果。
在CSS中实现卡片翻转动画，可以通过 transform 的 rotateY 属性结合 @keyframes 来完成。这种效果常用于展示卡片背面信息，比如产品介绍、人物名片等。下面详细介绍实现方法。
1. 基本结构与样式设置
先构建HTML结构，通常使用一个容器包裹前后两面：
正面内容背面内容
为卡片设置基础样式，启用3D变换效果：
.card {
width: 200px;
height: 300px;
position: relative;
perspective: 1000px; /* 创建3D透视感 */
}
.card-face {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden; / 隐藏背面时不可见 /
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: white;
}
.front {
background: #3498db;
z-index: 2;
}
.back {
background: #e74c3c;
transform: rotateY(180deg); / 背面初始旋转180度 /
}
2. 使用 @keyframes 定义翻转动画
通过 @keyframes 定义从0到180度的Y轴旋转过程：
立即学习“前端免费学习笔记（深入）”；
@keyframes flip {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(180deg);
}
}
然后将动画应用到整个卡片容器或特定触发状态：
.card:hover .front {
animation: flip 0.6s forwards;
}
.card:hover .back {
animation: flip 0.6s forwards;
animation-delay: 0.6s; / 等正面翻完再开始翻回 /
}
注意：这种方式适合一次性播放动画。若希望平滑来回翻转，推荐直接使用 :hover 触发 transform 变化并配合过渡（transition）更自然。
3. 更流畅的交互方式：配合 transition 实现双向翻转
虽然 @keyframes 适合复杂帧动画，但简单翻转用 transition 更高效：
.card {
width: 200px;
height: 300px;
position: relative;
perspective: 1000px;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.front, .back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: white;
}
.front {
background: #3498db;
}
.back {
background: #e74c3c;
transform: rotateY(180deg);
}
此时无需 @keyframes，靠 transition 自动补间动画，鼠标移入即翻转，移出自动复原，体验更自然。
4. 小贴士
- perspective 决定3D视觉深度，值越小越夸张
- transform-style: preserve-3d 确保子元素保持3D空间
- backface-visibility: hidden 避免翻转时看到反面内容“镜像”显示
- 动画时间建议控制在0.5~0.8秒之间，过长会显得迟缓
基本上就这些。如果需要循环动画或特殊节奏，再考虑使用 @keyframes 自定义关键帧。常规交互推荐用 transition + rotateY 实现，简洁又高效。
