backface-visibility: hidden 必须加在执行3d变换的子元素上，配合rotatex/y/z或translatez才生效；加在父容器或仅用于2d变换无效，因该属性不继承、不跨层，且仅响应gpu合成触发的3d上下文。
backface-visibility: hidden 必须加在真正执行 3D 变换的子元素上，且必须搭配 rotateX/Y/Z 或 translateZ 类变换才生效；设在父容器、或只配 2D 变换（如 rotate(180deg)），等于没写。
backface-visibility 为什么加在父容器上完全无效
浏览器只对「正在做 3D 变换」的元素应用 backface-visibility，该属性不继承，也不跨层作用。例如卡片翻转时，.card 是容器，真正旋转的是 .card-front 和 .card-back —— 如果只给 .card 加 backface-visibility: hidden，Safari 和 Chrome 仍会在 90° 左右透出背面文字或色块。
正确写法是直接作用于翻转面：
.card-front, .card-back {
backface-visibility: hidden;
transform: translateZ(0); /* 或 rotateY(180deg) */
}
- 两个面都得加，漏掉任意一个，动画中途就可能闪
- 用 CSS-in-JS 动态注入时，确保
backface-visibility和transform在同一规则块里，否则 WebKit 可能因解析顺序断裂而丢弃 3D 上下文 - 移动端 Android WebView（Chromium 90–99）需补
-webkit-backface-visibility: hidden，否则忽略
为什么 rotate(180deg) 不触发 backface-visibility
backface-visibility 不是“设了就生效”的开关，它只响应明确激活 GPU 合成管线的 3D 变换。纯 2D 变换（如 rotate(180deg)、scale(1) rotateZ(0)）不会触发图层提升，该属性被跳过。
- 必须用
rotateX()、rotateY()、rotateZ()或含translateZ()的组合 -
translateZ(0)是最稳妥的兜底写法：无视觉影响，但明确启用 3D 上下文 - 不要用
translateX(0)替代 —— 旧版安卓 WebView 可能不识别 XY 轴触发的硬件加速 -
translateZ(0)必须加在子元素上；加在.card容器上会导致子元素 Z 坐标系偏移，翻转错位
transition 必须绑定在容器上，不能拆到 front/back
如果给 .card-front 和 .card-back 各自写 transition: transform，它们会按各自初始状态开始动画：正面转到 120° 时背面才动，造成撕裂感或“飘忽”效果。
-
transition必须统一写在容器（如.card）上 - 同时确保父级有
transform-style: preserve-3d，否则子元素的 3D 空间会被压平 - 若使用
perspective，也应加在容器上，而非子元素 - 避免在翻转元素上混用
filter、backdrop-filter或mask—— 它们会让 GPU 渲染降级，backface-visibility失效前提
真机测试前必须确认的三件事
很多“写了但没用”的问题，根源不在 CSS 本身，而在上下文缺失：
- 确认翻转元素是否真的参与了 3D 变换：
rotate()不触发判定，必须是rotateY()或含translateZ(0)的组合 - iOS Safari 要求父级有
perspective才稳定识别背面行为；安卓 X5 内核可能需要 fallback 到-webkit-backface-visibility: hidden - 避免用
v-show或display: none控制翻转容器显隐 —— 图层被销毁重建，backface-visibility失效；应改用opacity: 0+pointer-events: none
最常被忽略的一点：动画结束后的最终状态，必须显式写在 class 规则里（如 .card.is-flipped { transform: rotateY(180deg); }），不能只靠 @keyframes 最后一帧 —— 否则 class 移除瞬间会回退到原始样式，造成“闪回”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
