backface-visibility: hidden 未生效是因为缺少完整3d渲染链：必须配合transform-style: preserve-3d、rotatey/rotatex、perspective、绝对定位及正反面均设hidden，缺一即静默失效。
backface-visibility: hidden 为什么根本没反应
它不是“失效”，而是压根没被触发——backface-visibility 只在真实 3D 渲染上下文中起作用，浏览器识别不到 3D 环境时，直接忽略该声明。
-
transform-style: preserve-3d没加在**直接包裹正反面的父容器**上（比如.card或.flip-inner），子元素会被强制拍平成 2D - 用了
transform: rotate(180deg)（2D 旋转），而不是rotateY(180deg)或rotateX(180deg)（3D 旋转） - 正反两面没同时设
backface-visibility: hidden—— 只设背面无效，正面也必须设，否则翻转中途会双面透出 - 父容器设了
overflow: hidden，裁掉了 Z 轴延伸部分，导致翻转过程被截断，“卡住”或“闪一下”
翻转后背面内容还是显示出来
这不是属性失效，而是你没初始化背面的状态：浏览器默认把背面当“贴纸”一起渲染，backface-visibility 默认值是 visible，不显式写 hidden 就永远可见。
- 正面和背面必须是两个独立子元素（如
.card__front和.card__back），都用position: absolute叠在同一位置 - 背面元素要预先加
transform: rotateY(180deg)，否则翻转时会从 0° 扭到 180°，产生“反向翻”动画 - 整个卡片容器必须有明确宽高，否则
absolute子元素会塌陷，定位错乱 - 别用
display: none控制背面显示/隐藏——这会让 3D 变换彻底失效；改用visibility: hidden+pointer-events: none
Safari 或移动端翻转卡顿、闪烁、点击无响应
这些不是 CSS 写错了，而是渲染策略和交互机制没对齐。
- 给翻转容器加
touch-action: manipulation，否则 iOS Safari 会拦截 click/tap - 避免在翻转元素上设
pointer-events: none（比如防连点），它会直接禁掉所有交互 - 动画卡顿？加
will-change: transform（仅交互开始前动态添加，结束后移除），或更稳妥地加transform: translateZ(0)强制 GPU 加速 - Safari 中文字模糊或白边抖动？
backface-visibility: hidden必须加在**动画主体元素自身**上，加在父级无效，且不能和transform: translateZ(0)混用（新版 WebKit 反而可能干扰图层策略）
IE11、iOS 9.3 以下等老环境翻转异常
它们对 transform-style: preserve-3d 支持极差，甚至渲染出全黑背面或严重闪烁，不能只靠 fallback 类名应付。
- IE11 基本不支持
preserve-3d，需降级为纯 opacity 切换或 JS 模拟翻转 - iOS 9.3 以下 Safari 有已知 bug：背面渲染异常，建议检测 UA 后禁用 3D 翻转，改用
transform: scaleX(-1)镜像模拟 - CSS-in-JS 库（如 Emotion）若压缩属性顺序，可能把
transform和backface-visibility拆开写，导致后者失效——确保transform在前，backface-visibility紧随其后
backface-visibility 不是开关式属性，它依赖整条 3D 渲染链完整就位——缺 perspective、缺 preserve-3d、缺 rotateY、缺绝对定位、缺初始化旋转，任意一环断开，它就静默失效，且控制台不会报错。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
