正反面错位或飘出边界，根本原因是定位上下文缺失：.front和.back需用position: absolute，其直接父容器（如.card-inner）必须设position: relative且有明确宽高，同时二者均须设置top: 0; left: 0; width: 100%; height: 100%。
为什么正反面总是错位或飘出卡片边界？
根本不是 transform 写错了，而是 .front 和 .back 没被约束在同一个定位上下文中。它们默认会相对于视口（viewport）定位，一旦页面有滚动、网格布局或多个卡片并列，就会全部叠在左上角或相互偏移。
-
.front和.back必须用position: absolute - 它们的**直接父容器**（比如
.card-inner或.flipper）必须设position: relative - 该父容器自身要有明确宽高（不能靠内容撑开），否则
absolute子元素会塌陷成0×0 - 正反面都得写全尺寸定位：
top: 0; left: 0; width: 100%; height: 100%
transform-style: preserve-3d 应该加在哪个元素上？
它只对**直系子元素**生效，加错位置等于没加。如果你的结构是 .card > .card-inner > .front, .back，那么 transform-style: preserve-3d 必须加在 .card-inner 上——不是 .card，更不是 .front。
- 加在
.card上 →.card-inner被压平，.front/.back失去 3D 坐标系，旋转后位置计算失真 - 加在
.front上 → 完全无效，它没有子元素需要“保持 3D” - 若父级有
overflow: hidden或transform，可能覆盖或截断 3D 渲染，必要时加contain: layout paint
backface-visibility: hidden 为什么必须正反面都加？
这个属性控制的是「元素自身背面是否渲染」，不是「哪一面朝前」。翻转到中间角度（比如 90°）时，.front 的背面和 .back 的正面都会短暂朝向用户。只给 .back 加，.front 的背面就会透底——尤其在 Chrome/Safari 下出现文字重影、发灰甚至空白。
- 必须同时写：
.front, .back { backface-visibility: hidden; } - 不能只写在
:hover里，它得始终生效 - 不能靠父容器设置继承，该属性不继承
- 别用
display: none控制背面显隐——它会让元素退出渲染流，3D 变换直接失效
perspective 值设多少才不抖不糊？
perspective 不是贴在翻转元素身上的，它是定义“观察者眼睛离整个 3D 场景多远”。设得太小（如 50px）会导致翻转弧度夸张变形；设太大（如 5000px）又几乎看不出立体感。
立即学习“前端免费学习笔记（深入）”；
- 推荐值范围：
300px～1200px，按卡片实际尺寸微调 - 小卡片（
200×300px）用600px左右，大卡片（400×600px）可用1000px - 必须写在所有卡片的**共同父容器**上（如
.cards-grid），而不是每个.card单独设 - 写在
.card自身上 → 多张卡片各自视角不一致，hover 时翻转轴晃动、边缘畸变
transform 没配对。正面设 rotateY(0deg)，背面就得设 rotateY(-180deg)，hover 时再分别转到 180deg 和 0deg——否则旋转逻辑不对，视觉就镜像了。 
