backface-visibility 默认值为 visible，因浏览器需兼容旧内容并确保3D变换可调试；背面默认渲染且响应交互，故翻转后仍可见可点击。
backface-visibility 为什么默认不隐藏背面？
很多初学者写完 transform: rotateY(180deg) 发现翻转后卡片背面依然清晰可见，甚至文字还能被选中、点击——这不是 bug，是浏览器默认行为：backface-visibility 的初始值是 visible。它只控制「元素背面是否渲染」，不控制「是否响应交互」，更不自动加 pointer-events: none。
- 背面默认渲染，意味着即使翻转了，DOM 仍在视觉层叠中
- 如果卡片正反面都用了
position: absolute或重叠布局，可能造成点击穿透或样式冲突 - 某些旧版 Safari（backface-visibility: hidden 在 flex 容器内有渲染异常，需额外加
transform: translateZ(0)触发硬件加速
必须同时设置的三个 CSS 属性
仅设 backface-visibility: hidden 不足以实现干净的翻转隐藏效果。实际生效依赖三者协同：
-
transform-style: preserve-3d：父容器必须开启 3D 渲染上下文，否则子元素的 rotateY 会被压平成 2D，backface-visibility失效 -
backface-visibility: hidden：分别加在正反两面元素上（不是只加在背面） -
transform: rotateY(180deg)（背面） +rotateY(0)（正面）：确保旋转轴一致，且使用transform而非rotate简写，避免与其他 transform 值冲突
.card {
transform-style: preserve-3d;
transition: transform 0.4s ease;
}
.card.is-flipped {
transform: rotateY(180deg);
}
.card__front,
.card__back {
backface-visibility: hidden;
}
.card__back {
transform: rotateY(180deg);
}
移动端点击穿透和 hover 失效怎么办？
在 iOS Safari 或部分安卓 WebView 中，翻转后背面元素可能无法响应点击，或 hover 效果错位，常见原因：
-
翻转容器未设
perspective，导致 3D 变换深度信息丢失，浏览器降级处理立即学习“前端免费学习笔记（深入）”；
正反面元素未设固定宽高或
overflow: hidden，翻转时内容溢出干扰事件捕获使用
:hover触发翻转时，移动端无 hover 状态，需补 JavaScript 监听click并切换 class建议给卡片父容器加上
perspective: 1000px（值太小会夸张变形，太大则翻转感弱）正反面元素务必设
width和height，避免因内容撑开导致翻转错位移动端优先用
tap事件或click+touchstart防止延迟，不要依赖纯 CSS hover
Chrome DevTools 里看不到背面渲染？那是对的
打开 DevTools → Elements 面板，选中背面元素，如果它的 Computed 标签页里 backface-visibility 显示为 hidden，但你在页面上仍“看到”背面内容——说明它根本没被翻转，或者 transform 没生效。这时候要检查：
- 父容器是否遗漏
transform-style: preserve-3d - 是否在翻转过程中动态修改了
transform值（比如 JS 同时写了scale和rotateY），导致 rotateY 被覆盖 - 是否用了
will-change: transform却没配transform，触发了渲染优化误判
真正生效时，背面元素在渲染树中是「存在但不可见」的状态，DevTools 不会高亮它，也不会在 Layers 面板显示其绘制图层——这恰恰说明 backface-visibility: hidden 起作用了。
翻转动画的边界条件特别容易被忽略：比如卡片嵌套在 overflow: hidden 容器里时，rotateY 过程中边缘会被裁切；又比如用 display: none 切换正反面，会直接破坏 transform 连续性。这些细节不试到真机或真用户场景，很难暴露。
