backface-visibility: hidden 仅在真实3D变换上下文中生效，须作用于执行rotateY/rotateX的子元素（如.card-front、.card-back），且需前置含Z轴的transform声明，配合perspective与transform-style: preserve-3d正确层级配置。
backface-visibility: hidden 不是“加了就生效”的开关，它只在真实 3D 变换上下文中起作用，且必须写在真正执行 rotateY/rotateX 的元素上——写错位置、缺 transform 声明、漏掉任一面对，都会导致毛边、闪烁或穿模。
必须作用于真正翻转的子元素，不是容器
很多人把 backface-visibility: hidden 写在卡片容器（如 .card）上，结果 iOS Safari 和安卓 WebView 依然闪烁。因为浏览器只对「正在被变换」的元素应用该属性，而翻转动作实际发生在 .card-front 和 .card-back 上。
- 正确写法：
.card-front, .card-back { backface-visibility: hidden; } - 两个面都要加，漏掉任意一个，翻转到 90° 左右时就会透出背面文字或色块
- 该属性不继承，父级设了等于没设
transform 声明必须前置且含真实 3D 变换
Safari 尤其严格：backface-visibility: hidden 前面必须紧跟着一个能激活 GPU 合成的 transform，且不能是纯 2D 变换（如 rotate(180deg)）。
- 有效组合：
transform: rotateY(0deg) translateZ(0);或transform: translate3d(0, 0, 0) rotateY(180deg); - 无效写法：
transform: rotate(180deg);（2D）、transform: scale(1);（无 Z 轴）、backface-visibility在transform之前但中间隔了其他声明 - 移动端兼容建议补全：
-webkit-backface-visibility: hidden;，尤其针对 Android Chromium 90–99
perspective 和 transform-style 必须配对出现在正确层级
翻转动画失效、Safari 下全黑或塌陷，90% 是因为 perspective 和 transform-style: preserve-3d 没写在对应层级，或互相错位。
立即学习“前端免费学习笔记（深入）”；
-
perspective必须加在翻转容器的**直接父级**（如.flip-container），不是加在.card或body上 -
transform-style: preserve-3d必须加在**执行翻转的容器**（如.flipper）上，它是.card-front和.card-back的直接父级 - 若
.flip-container设了overflow: hidden，会裁掉旋转后伸出的背面区域，应改用clip-path或overflow: visible
transition 必须统一绑定在容器上，不能分散写
如果把 transition: transform 0.6s 分别写在 .card-front 和 .card-back 上，它们会按各自初始状态独立动画，造成视觉撕裂、飘忽、边缘毛边暴露。
- 正确做法：
.card { transition: transform 0.6s cubic-bezier(.25,.75,.5,1); } - 同时确保
.card有transform-style: preserve-3d，否则子元素无法参与 3D 空间 - 避免在正反面元素上加
filter、opacity或display: none，这些会打断图层合成，让backface-visibility失效
最常被忽略的是：backface-visibility: hidden 是个“条件触发器”，不是“全局开关”。它依赖完整的 3D 渲染链路——从父级 perspective 到子元素 transform 声明顺序，再到每个翻转面的独立设置，缺一不可。少一个环节，毛边和闪烁就会回来。
