backface-visibility: hidden 是防止翻转时背面透出的必要设置，必须作用于带 transform 的子元素（如 .card__face），而非父容器；它强制禁用背面渲染，避免 GPU 渲染顺序导致的闪烁。
backface-visibility 为什么设成 hidden 才能翻转不穿帮
卡片翻转时背面内容“透过来”或闪一下，根本原因不是 transform 写错了，而是浏览器默认没关背面渲染。backface-visibility: hidden 不是锦上添花，是强制让背面不可见、不参与合成层绘制的硬性开关。
- 不加
backface-visibility: hidden：翻转到 90° 附近时，背面可能因 GPU 渲染顺序/抗锯齿策略短暂可见，尤其在 Chrome 或 Safari 移动端高频复现 - 必须加在「翻转的子元素」上（比如
.card__face），而不是父容器.card—— 否则整个卡片都变透明 - 只对有
transform的元素生效；纯opacity或left/top动画无效
CSS 3D 翻转必须开启 preserve-3d 吗
不一定。关键看你要翻的是哪一层。
- 如果只翻单个元素（比如一个
div自己绕 Y 轴转 180°）：父容器 不需要transform-style: preserve-3d，加了也没用 - 如果翻的是「卡片容器 + 正反两面」这种嵌套结构（常见写法）：必须给
.card加transform-style: preserve-3d，否则子元素的 3D 位置会被拍平成 2D，翻转变成缩放或错位 -
preserve-3d有兼容性代价：iOS Safari 15.4 之前对嵌套过深的 preserve-3d 支持不稳定，建议层级控制在 3 层以内
transition 触发翻转时卡顿或跳变
不是动画慢，是浏览器没提前升层。CSS 翻转本质是 GPU 加速路径，但得“提前告诉”浏览器哪些元素要走这条路。
- 必须给翻转元素加
will-change: transform或transform: translateZ(0)，否则首次翻转大概率掉帧 - 避免在
transition中同时改transform和opacity—— 这会让浏览器反复切换渲染管线，iOS 上尤其明显 - 不要用
transition: all .3s，精确写成transition: transform .3s, opacity .3s，否则其他属性变更（比如 JS 改了padding）也会触发无谓过渡
JavaScript 控制翻转状态时 class 切换失效
常见于用 element.classList.toggle('is-flipped') 但视觉没反应——问题往往出在 CSS 优先级或重排时机上。
立即学习“前端免费学习笔记（深入）”；
- 确保翻转相关的
transform声明写在.is-flipped .card__face--back这类具体选择器里，别被更宽泛的规则覆盖（比如全局div { transform: none }） - JS 切 class 后立刻读取
offsetHeight或强制重排（如getComputedStyle(el).transform），能避免浏览器把 class 切换和样式计算合并优化掉 - 移动端要注意：click 事件有 300ms 延迟，用户快速点两下可能触发两次 toggle，建议加防抖或用
pointerdown
真正容易被忽略的是：backface-visibility 在部分安卓 WebView 里对 iframe 内容无效，如果卡片里嵌了外部页面，翻转时 iframe 仍会穿透显示 —— 这时候只能用 visibility: hidden 配合 JS 控制显隐来兜底。
