根本问题在于3d渲染上下文配置错误：perspective必须设在.card的父容器（如.card-container）上，transform-style: preserve-3d必须设在.card上，backface-visibility: hidden必须设在正反面元素上。
翻转卡片看不见背面、动画卡顿、翻转后内容模糊或错位——根本问题不在动画本身，而在 3D 渲染上下文没搭对。只要 perspective 和 transform-style: preserve-3d 的作用层级写错，其他都白调。
perspective 必须设在翻转容器的父级，不能写在 .card 上
常见错误是把 perspective: 1000px 直接加在 .card 元素上。这样会导致子元素（.front/.back）的 3D 位置计算失效，浏览器退回到 2D 渲染，背面直接被裁掉或不可见。
正确做法是：用一个外层容器（比如 .card-container）包裹 .card，然后把 perspective 设在这个外层上：
.card-container {
perspective: 800px; /* 推荐 600px～1000px */
}
<p>.card {
transform-style: preserve-3d; /<em> 这里才加 preserve-3d </em>/
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
</p>
- 值太小（如
200px）会拉伸变形，像凑近镜头看卡片 - 值太大（如
3000px）则几乎看不出深度，翻转像平面切换 - 移动端建议用
perspective: 1200px，避免因视口缩放导致透视失真
transform-style: preserve-3d 必须作用在 .card，不是 .card-container
transform-style: preserve-3d 的目标是让 .card 的子元素（即 .front 和 .back）保留在同一个 3D 空间中。如果把它误加在 .card-container 上，而 .card 自身没开启 3D 上下文，那两个面依然会被压平到 Z=0 平面，旋转时重叠或错位。
同时注意：.card 不能有 overflow: hidden，否则会裁剪出 3D 空间的延伸部分（比如 rotateY 到 90° 时的侧面）。
- 别给
.card自己加transform动画以外的位移（如translateX），容易触发渲染异常 - 若卡片需要居中，用
margin: auto或 flex 布局，不要靠transform: translate挤位置 -
preserve-3d在 Safari 旧版本（iOS 15.4 之前）有兼容问题，可加-webkit-transform-style: preserve-3d
backface-visibility: hidden 是防“镜像穿帮”的关键
不加 backface-visibility: hidden，翻转到背面时，你看到的可能是正面内容的镜像翻转（尤其文字、图标），或者正反两面同时显示、重影。
这个属性必须加在正反两面元素上，不是 .card：
.card-front,
.card-back {
backface-visibility: hidden;
position: absolute;
width: 100%;
height: 100%;
}
-
.card-front初始设transform: rotateY(0deg) -
.card-back初始设transform: rotateY(180deg) - 别用
z-index控制前后——3D 翻转下它完全无效 - 翻转动画只改
.card的transform: rotateY()，不要动正反面自己的transform
rotateY 翻转左右颠倒？其实是起始朝向没调好
用 rotateY(180deg) 翻转，默认是“向右翻”。如果你想要“向左翻”，不要改成 rotateY(-180deg)——效果一样，且可能在某些浏览器中触发插值异常。
真正该做的是调整初始状态：
- 保持
.card-front { transform: rotateY(0) translateZ(50px) } - 把
.card-back改成transform: rotateY(180deg) translateZ(50px) - 再通过改变
.card的transform（比如 hover 时加rotateY(180deg)）来驱动翻转 -
translateZ值建议取卡片厚度一半（如 50px），太小显得单薄，太大易糊
GPU 加速未生效时文字会锯齿，可在 .card 上加 will-change: transform 或 transform: translateZ(0) 强制启用硬件加速——但别滥用，可能引发内存泄漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
