backface-visibility: hidden 仅在父容器启用 transform-style: preserve-3d、正反面均声明该属性、元素应用含 z 轴的 3d 变换（如 rotatey）时生效；rotate(180deg) 等纯 2d 变换无效。
直接说结论：只写 backface-visibility: hidden 没用，必须同时满足三个条件——父容器开启 3D 上下文、正反面都加该声明、元素本身有真正 3D 变换（比如 rotateY()）。
为什么写了 backface-visibility: hidden 还能看到背面？
因为浏览器默认值就是 visible，而且它只在「3D 渲染上下文有效」时才起作用。如果父容器没设 transform-style: preserve-3d，或者你只用了 2D 的 rotate(180deg)，那这个属性压根不触发。
- 仅对含
rotateX、rotateY、translateZ等 Z 轴参与的变换生效；rotate(180deg)是纯 2D，无效 - 旧版 Safari（transform: translateZ(0) 强制硬件加速
- IE11 几乎不支持
preserve-3d，iOS 9.3 以下 Safari 会出现背面全黑或闪烁
必须设在哪个元素上？
backface-visibility: hidden 要加在「将被翻转的子元素」上，不是父容器——而且正反两面都得加，只加背面没用。
- 典型结构：
.card（外层容器）→.card-inner（设transform-style: preserve-3d）→.card-front和.card-back（二者都设backface-visibility: hidden） - 如果只给
.card-back加，翻转过程中正面还没完全消失时，背面就会提前透出（尤其 Chrome/Safari 下明显） - 这个容器（如
.card-inner）还必须有明确宽高，否则position: absolute的两面会塌陷、错位
配套 CSS 缺一不可的三行
这三行要一起出现，少一行翻转效果就不可靠：
/* 包裹正反面的直接父容器 */
.card-inner {
transform-style: preserve-3d;
width: 200px;
height: 300px;
}
<p>/<em> 正面和背面都要加 </em>/
.card-front,
.card-back {
backface-visibility: hidden;
}</p><p>/<em> 背面初始状态翻转 180 度 </em>/
.card-back {
transform: rotateY(180deg);
}</p>
-
transform-style: preserve-3d必须设在正反面的**共同直系父容器**上，设错层级（比如只设在外层.card，但两面在.card-content里）会导致旋转轴偏移 - 移动端若点击无反应，大概率是手势被
overflow: hidden或外部滚动拦截了，不是 JS 问题 - 别依赖前缀：现代浏览器（Chrome 110+、Firefox 100+、Safari 16+）已无需
-webkit-等前缀，加了反而可能干扰解析
最容易被忽略的一点：这个属性不控制交互响应——即使背面隐藏了，如果没加 pointer-events: none，它依然能被点击或选中文字。需要视觉隐藏 + 交互禁用，得两个声明一起上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
