答案：通过HTML结构与CSS的transform、rotateY及transition实现卡片翻转，利用preserve-3d创建3D空间，backface-visibility隐藏背面，hover时旋转card-inner容器使正背面翻转，无需JavaScript即可完成动画效果。
想让一张卡片在鼠标悬停时翻转显示背面内容，可以用 CSS 的 transform、rotateY 和 @keyframes 实现。整个过程不需要 JavaScript，只需结构化的 HTML 和精心编写的 CSS。
1. 基本结构：创建卡片容器
卡片翻转需要一个外层容器（card），内部包含正面和背面两个面。使用 transform-style: preserve-3d 保持3D空间，这是实现翻转的关键。
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 让子元素处于3D空间
- 通过 backface-visibility: hidden 隐藏元素背面（比如翻转180度后不显示正面）
示例CSS：
.card {
width: 200px;
height: 300px;
perspective: 1000px;
position: relative;
}
.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;
transform: rotateY(0deg);
}
.back {
background: #e74c3c;
transform: rotateY(180deg);
}
3. 使用 @keyframes 定义翻转动画
你可以用 @keyframes 明确定义旋转过程，也可以直接用 transition 实现平滑过渡。如果要用 keyframes，则可以这样写：
@keyframes flip {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(180deg);
}
}
@keyframes unflip {
0% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(0deg);
}
}
然后绑定到 hover 状态：
.card:hover .front {
animation: flip 0.6s forwards;
}
.card:hover .back {
animation: unflip 0.6s forwards;
}
不过更常见且简洁的方式是使用 transition：
.card:hover .front {
transform: rotateY(-180deg);
}
.card:hover .back {
transform: rotateY(0deg);
}
.card-face {
transition: transform 0.6s ease;
}
注意：当正面旋转 -180deg，背面从 180deg 转为 0deg，视觉上就完成了“翻转”效果。
4. 完整简化版示例（推荐）
结合以上要点，最实用的写法如下：
.card {
width: 200px;
height: 300px;
perspective: 1000px;
}
.card-inner {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s ease;
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
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);
}
对应的 HTML：
<div class="card">
<div class="card-inner">
<div class="card-face front">正面</div>
<div class="card-face back">背面</div>
</div>
</div>
这种结构更清晰，利用中间层 .card-inner 控制整体翻转，正背面自动响应。
基本上就这些。掌握 preserve-3d、backface-visibility 和 rotateY 的配合，就能轻松做出流畅的卡片翻转动画。
