backface-visibility必须作用于执行3D变换的子元素（如.card-front、.card-back），而非父容器；需配合translateZ(0)或rotateY(180deg)等真实3D变换，并统一在容器上设置transition和transform-style: preserve-3d。
backface-visibility必须加在翻转的子元素上，不是父容器
很多人把 backface-visibility: hidden 写在卡片容器（比如 .card）上，结果在 Safari 和 Chrome 中依然闪烁——因为真正执行 3D 变换的是 .card-front 和 .card-back 这两个子元素。浏览器只对「正在做变换」的元素应用该属性，父容器设了等于没设。
正确做法是直接作用于翻转面：
.card-front, .card-back {
backface-visibility: hidden;
}- 如果用 CSS-in-JS 动态注入样式，确保
backface-visibility和transform在同一规则块里，否则解析顺序断裂会导致 3D 上下文失效 - 移动端 Android WebView（Chromium 90–99）可能忽略无前缀写法，需补
-webkit-backface-visibility: hidden - 不要只给一个面加，两个面都得加；漏掉任意一个，90° 左右就可能透出背面文字或色块
必须搭配真实 3D 变换，rotateY(180deg) 可以，rotate(180deg) 不行
backface-visibility: hidden 在 Chrome 中不是“设了就生效”，它只响应明确激活 GPU 合成管线的 3D 变换。纯 2D 变换（如 rotate(180deg)、scale(1) rotateZ(0)）不会触发图层提升，该属性被跳过。
稳妥写法是让每个翻转面自带一个无视觉影响但明确启用 3D 的变换：
立即学习“前端免费学习笔记（深入）”；
.card-front, .card-back {
backface-visibility: hidden;
transform: translateZ(0); /* 或 translate3d(0, 0, 0) */
}-
translateZ(0)必须加在子元素上，加在.card容器上会导致子元素 Z 坐标系偏移，翻转错位 - 如果已用
transform: rotateY(180deg)，translateZ(0)可省略；但若仅靠 hover 切换 class 触发旋转，建议共存保兼容 - 避免用
translateX(0)替代，旧版安卓 WebView 可能不识别 XY 轴触发的硬件加速
transition 必须绑定在容器上，不能分开写在 front/back 上
如果给 .card-front 和 .card-back 各自写 transition: transform，它们会按各自初始状态开始动画：正面转到 120° 时背面才动，造成撕裂感或“飘忽”效果。
翻转动画的同步性取决于统一的变换锚点，正确绑定位置是卡片容器本身：
.card {
transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}-
.card需配合transform-style: preserve-3d和perspective（尤其 iOS Safari 稳定识别背面行为依赖此） - 不要在翻转元素上同时用
filter、backdrop-filter或mask，这些会让 GPU 渲染降级，backface-visibility失效 - 用
v-show或display: none控制显隐会销毁图层，应改用opacity: 0+pointer-events: none
animation-fill-mode 才管结束闪烁，backface-visibility 不负责这个
很多人误以为加了 backface-visibility: hidden 就能解决动画结束后“闪回原位”的问题，其实这是两回事：backface-visibility 只控制过渡过程中的图层稳定性；动画结束跳变，是因为默认 animation-fill-mode: none，样式被撤回。
修复结束闪烁必须靠 animation-fill-mode: forwards：
@keyframes flip {
0% { transform: rotateY(0); }
100% { transform: rotateY(180deg); }
}
.card { animation: flip 0.6s forwards; }- 关键帧必须定义完整终态（100%），漏掉就锁不住
- 避免内联样式或高权重类覆盖终态，它们会压过
forwards效果 -
animation-fill-mode只对已成功触发的动画生效；JS 中刚加 class 就 remove，动画根本没走到结束，forwards就没机会执行
容易被忽略的一点是：backface-visibility: hidden 和 transform: translateZ(0) 的声明顺序不能错——前者必须紧跟后者在同一规则中，否则现代 Safari 会直接忽略图层锁定指令。
