perspective必须设在父容器上，transform-style需加在直接包裹子面的容器上，backface-visibility须分别加在正反面自身；三者缺一不可且层级不能错。
perspective 必须设在父容器上，不能写在要变形的元素自身
很多人把 perspective: 800px 直接加在 .card 或 .box 上，结果翻转没透视、旋转像2D倾斜——浏览器根本无视它。因为 perspective 定义的是“观察者到 Z=0 平面的距离”，它只对子元素生效，不作用于自己。
- ✅ 正确做法：用外层包裹容器（如
.scene或.cards-grid）设置perspective: 800px（600–1200px 是安全范围） - ❌ 错误写法：
.card { perspective: 800px; transform: rotateY(180deg); }—— 这里的perspective不起作用 - 数值太小（如 200px）会让元素在90°时缩成一条线；太大（如 3000px）则接近平面切换，失去立体感
- 移动端建议用
perspective: 1200px，避免视口缩放后透视失真
transform-style: preserve-3d 必须加在直接包裹子面的容器上
这个属性决定子元素是否保留在独立 Z 轴位置。它不继承，只对直系子元素生效。加错位置会导致所有子元素被压平到同一平面，背面永远看不见。
- ✅ 正确位置：加在
.card或.card-inner上（即直接包含.card-front和.card-back的那个元素） - ❌ 错误位置：加在
.card-container（影响不到子卡片）或加在.card-front（它没有需要保留 3D 的子元素） - 如果祖先元素设置了
overflow: hidden或任意transform（包括translateZ(0)），可能截断 3D 渲染层，导致背面被裁掉 - Safari 旧版本（iOS 15.4 之前）需补
-webkit-transform-style: preserve-3d
backface-visibility: hidden 必须分别加在正反面自身
不加这句，翻转到 90° 时会同时渲染正反两面，文字镜像、颜色混叠，甚至内容“消失”——这不是 bug，是浏览器默认行为。
- ✅ 必须写在两个面自身：
.card-front, .card-back { backface-visibility: hidden; } - ❌ 加在
.card或:hover里都无效；也不能只加一面 - 移动端 Safari 对该属性支持不稳定，可配合
transform: translateZ(0)强制启用硬件加速 - 若用伪元素实现文字 3D 效果，每个伪层也必须单独加
backface-visibility: hidden
真正卡住人的不是代码写不对，而是层级关系没理清：perspective 控制谁看、transform-style 控制谁参与、backface-visibility 控制谁露脸——三者缺一不可，且必须落在正确的 DOM 层级上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
