穿模主因是3D上下文缺失：.front和.back均需backface-visibility:hidden；transform-style:preserve-3d须加在直接父容器（如.card-inner）且配position:relative；perspective须设于翻转容器父级（如.card）且≥800px；正反面absolute定位须完全重叠。
backface-visibility: hidden 没加在所有面上
穿模（即正反面互相穿透、闪烁、错位）最常见原因是只给 .back 加了 backface-visibility: hidden，而漏掉了 .front。浏览器对每个面单独判断是否渲染背面，只要任一面的背面可见且未隐藏，旋转到特定角度时就会和另一面重叠或穿透。
必须确保：正反两面都显式声明 backface-visibility: hidden，不能依赖默认值或只加在“看起来该隐藏”的那一面。
-
.front和.back都要加，哪怕它当前是正面 - 如果用 CSS 类控制翻转状态（如
.is-flipped），别只在类里改rotateY，也要同步保证两个面的backface-visibility始终为hidden - 某些旧版 Safari 对
backface-visibility的继承行为不一致，显式写比省略更可靠
transform-style: preserve-3d 没加在直接父容器上
穿模常伴随“背面飘走”“位置计算失真”，根本不是旋转角度问题，而是 3D 空间没建起来。浏览器把子元素当 2D 元素拍平处理，rotateY(180deg) 后的坐标不是真实空间位置，导致层叠关系错乱。
关键点：transform-style: preserve-3d 必须加在**包裹正反面的直接父容器**上（比如 .card-inner），而不是更外层的 .card 或某一级 wrapper。
立即学习“前端免费学习笔记（深入）”；
- 结构如
.card > .card-inner > .front, .back，则preserve-3d必须写在.card-inner上 - 该容器还必须有
position: relative（为内部absolute提供定位上下文） - 该容器自身不能被
overflow: hidden截断，否则伸出平面的面会被裁掉，视觉上像“突然消失”而非穿模
perspective 写错了位置或值太小
穿模有时是透视失真导致的误判——perspective 写在旋转元素自己身上，或设得太小（如 100px），会让 Z 轴距离被极度压缩，旋转后两个面在 Z 方向几乎重合，浏览器渲染时无法正确分层。
perspective 必须写在**翻转容器的父级**（如 .card），且值建议 ≥ 800px；太小会导致深度感丢失，Z 坐标差异不足以支撑层叠判定。
- 错误写法：
.card-inner { perspective: 200px; }→ 它自己不是透视观察点，是被观察对象 - 正确写法：
.card { perspective: 1000px; }，再让.card-inner承载变换 - 不要用
perspective: none或0，那等价于关闭 3D 渲染
absolute 定位没统一尺寸与锚点
正反面用 position: absolute 但没对齐尺寸和起点，会导致它们在 3D 空间中占据不同“体积”，旋转时边界错开，视觉上就是穿模或错位。
必须强制正反面完全重叠：相同宽高、相同定位原点、相同堆叠顺序（靠空间位置分层，不靠 z-index）。
- 两面都要设：
top: 0; left: 0; width: 100%; height: 100% - 避免仅靠
z-index控制前后——3D 旋转应由transform的空间坐标决定，z-index在 3D 场景下不可靠 - 如果父容器用了
transform（如scale()或translate()），它会创建新包含块，可能干扰absolute的定位基准，间接破坏面的对齐
backface-visibility、transform-style、perspective、absolute 四者缺一不可，且必须落在正确的 DOM 层级上。 
