答案：通过CSS 3D变换和过渡实现卡片翻转。1. 构建包含前后两面的卡片结构，设置perspective和backface-visibility；2. 使用transform: rotateY()控制旋转，transition添加动画；3. 通过:hover或JavaScript切换类实现交互翻转，preserve-3d保持3D空间效果。
要实现卡片翻转动画，核心是利用 CSS 的 3D 变换（transform）和过渡（transition）效果。通过控制元素的旋转和背面可见性，就能做出逼真的翻转效果。
1. 基本结构与样式
先构建一个包含前后两面的卡片容器。通常使用一个父容器包裹 front 和 back 两个子元素。
正面内容背面内容
给卡片设置基本样式，并启用 3D 空间：
.card {
width: 200px;
height: 300px;
perspective: 1000px; /* 创建3D透视感 */
}
.card-face {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden; / 关键：隐藏背面 /
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
transition: transform 0.6s ease;
}
.front {
background: #fff;
z-index: 2;
}
.back {
background: #007bff;
color: white;
transform: rotateY(180deg); / 背面初始旋转180度 /
}
2. 添加翻转交互
通过:hover 或类切换触发翻转。当鼠标悬停在卡片上时，让整个卡片容器旋转。
立即学习“前端免费学习笔记（深入）”；
.card:hover .front {
transform: rotateY(-180deg);
}
.card:hover .back {
transform: rotateY(0deg);
}
或者统一控制父级更简洁：
.card-inner {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d; /* 保持3D空间 */
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
对应 HTML 结构稍作调整：
正面背面
3. 关键属性说明
理解以下几个 CSS 属性对实现翻转至关重要：
- perspective：定义观察者距离元素的远近，值越小透视感越强
- transform-style: preserve-3d：确保子元素也处于3D空间中
- backface-visibility: hidden：防止背面内容反向显示
- rotateY()：沿Y轴旋转，实现水平翻转效果
4. 可扩展用法
可以结合 JavaScript 动态添加类来控制翻转状态，适用于点击翻转等场景：
// JS 示例
document.querySelector('.card').addEventListener('click', function() {
this.classList.toggle('flipped');
});
CSS 中定义 flipped 状态：
.card.flipped .card-inner {
transform: rotateY(180deg);
}
基本上就这些。掌握好 3D 变换和背面控制，就能灵活实现各种翻转动画效果。
