backface-visibility: hidden 必须加在执行3d变换的子元素（如.card-front和.card-back）上，仅加在父容器无效；需搭配translatez(0)等真3d变换触发，transition应设于共同父容器，且背面需初始rotatey(180deg)并配pointer-events: none。
backface-visibility: hidden 必须加在翻转的子元素上
它只对「正在执行 3D 变换」的元素生效，加在父容器（如 .card）上完全无效。真正 rotateY 的是 .card-front 和 .card-back，所以这两个类必须都写：backface-visibility: hidden。
常见错误包括：
- 只给
.card加，子元素没加 → Safari 和 Chrome 都闪 - 只给
.card-back加，漏掉.card-front→ 翻转到 90° 左右时正面背面同时可见，文字镜像重叠 - 用 CSS-in-JS 动态注入时，
backface-visibility和transform被拆到不同样式块 → 浏览器无法建立 3D 上下文，属性被忽略
必须搭配真实 3D 变换才能触发
backface-visibility: hidden 在 Chrome 中不是“设了就生效”，它只响应明确激活 GPU 合成管线的变换。纯 2D 的 rotate(180deg) 或 scale(1) rotateZ(0) 不会触发图层提升，该属性被跳过。
稳妥做法是确保每个翻转面都带一个无视觉影响但明确启用 3D 的变换：
-
transform: translateZ(0)或translate3d(0, 0, 0) -
transform: rotateY(180deg)（已含 Z 轴分量，可省略translateZ(0)） - 避免用
translateX(0)替代 —— 旧版安卓 WebView 可能不识别 XY 轴触发的硬件加速
transition 必须绑定在容器上，不能分写在正反面上
如果给 .card-front 和 .card-back 分别写 transition: transform，它们会按各自初始状态独立启动动画：正面转到 120° 时背面才动，导致撕裂感或“飘忽”效果。
正确做法是：
-
transition写在包裹两面的直接父容器（如.card或.card-inner）上 - 两面都设
position: absolute; top: 0; left: 0;，确保视觉重叠 -
.card-back初始就要带transform: rotateY(180deg)，否则和正面堆叠，再加backface-visibility: hidden就等于隐藏了自己
移动端兼容要补前缀且注意 perspective 层级
Android WebView（Chromium 90–99）可能忽略无前缀写法，需显式补：-webkit-backface-visibility: hidden。现代浏览器（Chrome 110+、Safari 16+）虽已支持无前缀，但混合环境里加前缀更稳。
另外，perspective 必须写在更外层容器（如 .card-container），不能写在 .card 自身上；而 transform-style: preserve-3d 必须设在正反面的**共同直系父容器**（如 .card-inner）上 —— 设错层级会导致旋转轴偏移、背面错位。
最容易被忽略的一点：backface-visibility: hidden 不影响交互响应。即使背面不可见，若没加 pointer-events: none，它依然能被点击或选中文字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
