backface-visibility: hidden 是翻转动画的必要条件，必须加在.card-front和.card-back上，配合transform-style: preserve-3d、含z轴的transform（如rotatey）及外层perspective才能生效。
backface-visibility: hidden 不是可选项，是翻转动画的必要条件
它不是“让效果更好”，而是“让翻转不露馅”——漏掉它，90°左右就会看到背面文字镜像透出、重叠或闪烁，尤其在 Chrome 和 Safari 上非常明显。
这个属性只对真正进入 3D 空间的元素起作用，所以必须配合以下三点同时存在：
-
transform必须含 Z 轴分量：比如rotateY(180deg)、rotateX(180deg)或translateZ(0)；纯rotate(180deg)（2D）直接忽略该属性 - 翻转容器（如
.card）必须设transform-style: preserve-3d，否则子元素被拍平，背面概念失效 -
perspective必须写在更外层容器（如.card-container），不能写在翻转元素自己身上
为什么只给父容器加 backface-visibility 没用？
因为 backface-visibility 控制的是「正在被翻转的那个面」是否可见，不是控制整个卡片。真正做 rotateY 的是 .card-front 和 .card-back，所以这两个元素必须各自声明：
.card-front, .card-back {
backface-visibility: hidden;
}
常见错误包括：
- 只在
.card上写backface-visibility: hidden→ 完全无效 - 用 CSS-in-JS 动态注入时，
backface-visibility和transform分属不同样式块 → 浏览器无法建立 3D 上下文 - 移动端 Android WebView（Chromium 90–99）不认无前缀写法 → 必须补
-webkit-backface-visibility: hidden
transition 绑定错位置，翻转就撕裂
动画同步性取决于变换锚点统一。如果把 transition: transform 写在 .card-front 和 .card-back 上，它们会按各自初始状态独立启动动画，导致正面转到 120° 时背面才动，出现“飘忽”或卡顿感。
正确做法是：
-
transition必须绑定在包裹两面的容器上（如.card） - 两面都设
position: absolute+top: 0; left: 0;，确保视觉重叠 - 背面元素初始就要带
transform: rotateY(180deg)，否则和正面堆在一起，再加backface-visibility: hidden就等于隐藏了自己
移动端 perspective 值太小会抖动
Safari 对 perspective 高度敏感。设成 200px 会导致翻转到 90° 时背面瞬间消失；设成 5000px 又会让 Z 轴压缩，看起来像平面旋转。
推荐值域：
- 桌面端：
perspective: 1000px到1500px平衡景深与稳定性 - 移动端：至少
600px，低于此值 iOS Safari 容易抖动或丢帧 - 别用
display: none或visibility: hidden替代backface-visibility: hidden→ 元素退出 3D 空间，动画直接中断
backface-visibility 就成了摆设。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
