答案是使用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 卡片容器
先写一个简单的卡片结构，包含正面和背面两个面：
<div class="card"> <div class="card-face front">正面</div> <div class="card-face back">背面</div> </div>
2. 设置3D空间与翻转容器
CSS中要启用3D变换，必须在父容器上使用 perspective，并给卡片设置 transform-style: preserve-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;
font-weight: bold;
}</p><p>.front {
background: #3498db;
color: white;
}</p><p>.back {
background: #e74c3c;
color: white;
transform: rotateY(180deg); /<em> 背面初始旋转180度 </em>/
}</p>3. 使用 @keyframes 定义旋转动画
通过 @keyframes 定义一个从0到180度的Y轴旋转动画：
立即学习“前端免费学习笔记（深入）”；
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
@keyframes cardFlip {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(180deg);
}
}
<p>.card:hover .front {
animation: cardFlip 0.6s forwards;
}</p><p>.card:hover .back {
animation: cardFlip 0.6s forwards;
animation-delay: 0.6s; /<em> 等正面翻完再显示背面 </em>/
}</p>上面代码会让卡片在悬停时正面翻转，背面延迟出现。但更推荐的方式是直接对整个卡片做变换，而不是分别动画两个面。
改进方案：把动画应用在包裹层：
.card-container {
width: 200px;
height: 300px;
perspective: 1000px;
}
<p>.card {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s ease;
}</p><p>.card:hover {
transform: rotateY(180deg);
}</p><p>.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;
}</p><p>.front {
background: #3498db;
color: white;
}</p><p>.back {
background: #e74c3c;
color: white;
transform: rotateY(180deg);
}</p>这种方式更简洁，无需 @keyframes，用 transition 实现平滑翻转。但如果坚持要用 @keyframes，可以这样定义：
@keyframes flipIn {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(180deg);
}
}
<p>.card.animated {
animation: flipIn 0.6s ease forwards;
}</p>然后通过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变换机制，选对方法就能轻松做出流畅效果。
