答案是使用CSS的transform、rotate和transition或@keyframes实现卡片翻转动画。1. HTML结构包含正背面两个div；2. 父容器设置perspective创建3D空间，卡片设置transform-style: preserve-3d；3. 正背面绝对定位，背面初始rotateY(180deg)并隐藏反面；4. 通过:hover触发card的rotateY(180deg)配合transition实现平滑翻转，或用@keyframes定义动画帧，结合JavaScript触发动画类，确保视觉连贯性与交互流畅。
想让网页中的卡片元素实现翻转动画，比如像翻牌一样展示背面内容，可以通过CSS的 transform、rotate 和 @keyframes 配合完成。整个过程不难，关键是设置好3D变换环境和旋转关键帧。
1. 基础结构：HTML 卡片容器
先写一个简单的卡片结构，包含正面和背面两个面：
正面背面
2. 设置3D空间与翻转容器
CSS中要启用3D变换，必须在父容器上使用 perspective，并给卡片设置 transform-style: preserve-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;
font-weight: bold;
}
.front {
background: #3498db;
color: white;
}
.back {
background: #e74c3c;
color: white;
transform: rotateY(180deg); / 背面初始旋转180度 /
}
3. 使用 @keyframes 定义旋转动画
通过 @keyframes 定义一个从0到180度的Y轴旋转动画：
立即学习“前端免费学习笔记（深入）”；
@keyframes cardFlip {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(180deg);
}
}
.card:hover .front {
animation: cardFlip 0.6s forwards;
}
.card:hover .back {
animation: cardFlip 0.6s forwards;
animation-delay: 0.6s; / 等正面翻完再显示背面 /
}
上面代码会让卡片在悬停时正面翻转，背面延迟出现。但更推荐的方式是直接对整个卡片做变换，而不是分别动画两个面。
改进方案：把动画应用在包裹层：
.card-container {
width: 200px;
height: 300px;
perspective: 1000px;
}
.card {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s ease;
}
.card:hover {
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;
font-weight: bold;
}
.front {
background: #3498db;
color: white;
}
.back {
background: #e74c3c;
color: white;
transform: rotateY(180deg);
}
这种方式更简洁，无需 @keyframes，用 transition 实现平滑翻转。但如果坚持要用 @keyframes，可以这样定义：
@keyframes flipIn {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(180deg);
}
}
.card.animated {
animation: flipIn 0.6s ease forwards;
}
然后通过JavaScript添加类触发动画：
document.querySelector('.card').addEventListener('click', function() {
this.classList.toggle('animated');
});
4. 关键点总结
- perspective 决定3D视觉距离，一般设在父容器
- transform-style: preserve-3d 确保子元素保持3D空间
- backface-visibility: hidden 避免翻转时看到反面内容
- 背面元素初始应 rotateY(180deg)
- 动画可用 transition（交互）或 @keyframes（精确控制）
基本上就这些。实现卡片翻转的核心是理解3D变换机制，选对方法就能轻松做出流畅效果。
