backface-visibility: hidden必须写在真正执行rotateY的正反面元素上，如.card-front、.card-back，并配transform: rotateY()等真实3D变换，且需加-webkit前缀、避免filter干扰。
backface-visibility: hidden必须写在真正执行rotateY的元素上
很多人把backface-visibility: hidden加在卡片容器（比如.card）上，结果 Safari 依然闪烁——因为翻转动作实际发生在.card-front和.card-back这两个子元素身上。浏览器只对「正在被变换」的元素应用该属性，父级设了等于没设。
正确做法是直接作用于正反两面：
.card-front, .card-back { backface-visibility: hidden; }- 不能只写其中一面，漏掉任意一个都会导致翻转中途穿模或文字透出
- 该属性不继承，也不能靠父容器设置传递
transform声明必须前置且含真实3D变换
Safari 对backface-visibility的生效有硬性依赖：它前面必须紧跟着一个非none的transform声明，且该变换必须触发 3D 渲染路径。
常见错误写法：
立即学习“前端免费学习笔记（深入）”；
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
.card-front { backface-visibility: hidden; transform: rotateY(180deg); }——transform在后，Safari 忽略hidden -
.card-front { backface-visibility: hidden; transform: rotate(180deg); }—— 这是 2D 变换，不触发背面判定
应改为：
.card-front { transform: rotateY(0deg) translateZ(0); backface-visibility: hidden; }-
translateZ(0)比translateX(0)更可靠，尤其在旧版安卓 WebView 中
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
iOS Safari 的兼容细节不能跳过
iOS Safari（尤其 15.4+）对backface-visibility的处理更严格，几个容易被忽略的点：
- 必须加
-webkit-backface-visibility: hidden前缀，仅写标准属性在部分版本中无效 - 若父级用了
will-change: transform，子元素可能被跳过硬件加速判断，需额外加transform: translateZ(0)兜底 - 避免在翻转元素上同时使用
filter、backdrop-filter或mask——它们会让 GPU 渲染降级，backface-visibility彻底失效 - 动态修改
perspective值会强制每帧重算投影矩阵，引发卡顿或空白，真机调试时应固定为perspective: 600px（移动端）
最常被忽略的是：翻转动画的稳定性不取决于“图层是否够快”，而取决于背面是否被浏览器彻底丢弃。只要有一帧渲染了背面像素，Safari 就会闪一下。
