加了transform-style: preserve-3d仍无立体感，大概率是父容器漏设perspective，或perspective未作用于直接包含3D子元素的层级；perspective必须由上一级设置才能影响其直系子元素的3D投影计算。
为什么加了 transform-style: preserve-3d 还是没立体感
大概率是父容器漏了 perspective，或者它没作用在“真正包含 3D 子元素”的那一层。浏览器只对 perspective 的**直系子元素**启用 3D 投影计算，写在 .scene 上，.cube 才能按 Z 值缩放；如果写在 .cube 上，它的六个面（.face）就收不到透视影响——它们只是普通子元素，不是 .cube 的“观察者”。
常见错误：.cube { perspective: 1000px; transform-style: preserve-3d; } → 无效，因为 perspective 必须由上一级提供。
transform-style: preserve-3d 必须加在哪一层
它必须加在**直接承载 3D 变换子元素的父元素**上，且该父元素自身通常也要有 transform（哪怕只是 transform: rotateY(0)）。比如立方体结构中：
-
.scene：设perspective: 1000px -
.cube：设transform-style: preserve-3d（因为它的子元素.face要各自 translateZ、rotateX） -
.face：不设transform-style，但需加backface-visibility: hidden
.face 内部还要嵌套旋转图标，那这个 .face 就得额外加 transform-style: preserve-3d，否则图标会被拍平。
translateZ 的正负和数值怎么选才不穿模
Z 值不是越大越好，它必须落在 perspective 定义的有效视锥内。假设 perspective: 800px，那么 translateZ(1000px) 的元素会跑到观察者“身后”，可能被裁剪或渲染异常；而 translateZ(-1000px) 则推得太远，缩得太小甚至不可见。
实用建议：
- 立方体边长为 200px 时，常用
translateZ(100px)（半边长），保证六面均匀分布 - 相册卡片翻转，用
translateZ(50px) ~ 80px更自然，避免边缘畸变 - 移动端慎用大
perspective（如 3000px），会导致翻转迟钝、缩放失真
移动端 hover 失效和 backface-visibility 的坑
iOS Safari 和部分安卓 WebView 对 hover 支持极弱，纯靠 :hover 触发 3D 翻转在手机上基本不工作。必须用 JS 绑定 touchstart 或切换 class；同时 backface-visibility: hidden 必须加在每个要翻转的子元素（如 .front、.back）上，而不是父容器——加错位置会导致背面透出、闪烁，甚至触发重绘卡顿。
另一个隐形陷阱：transform-style: preserve-3d 在旧版 Safari（≤14.5）需要前缀：-webkit-transform-style: preserve-3d，漏掉就退化成 flat。
立即学习“前端免费学习笔记（深入）”；
真正卡住人的从来不是 rotateY 或 translateZ 的写法，而是哪一层该设 perspective、哪一层该开 preserve-3d、Z 值是否落在可视范围内——这三者错一个，整个 3D 层次就塌成一张纸。
