transform-style: preserve-3d 没效果最常见的原因是父容器未设置该属性，导致子元素3D变换被拍平；必须在直接包含3D子元素的父容器上显式设置，且需配合perspective、避免overflow:hidden等裁剪行为。
为什么 transform-style: preserve-3d 没效果？
最常见原因是父容器没设 transform-style: preserve-3d，而只在子元素上加了 3D 变换（比如 rotateX）。浏览器默认把每个元素渲染在独立的平面里，子元素的 3D 变换会被“拍平”到父容器的 2D 平面中——相当于关掉了 3D 空间开关。
必须在**直接包含 3D 子元素的父容器**上设置该属性，且该父容器自身不能是 transform 或 perspective 的“终结者”（例如不能是 overflow: hidden 且无 transform 的普通块级元素，否则会创建新的 stacking context 并截断 3D 渲染）。
- 父容器需有明确尺寸（
width/height），否则子元素可能塌缩导致看不见 - 父容器建议同时加
perspective（如perspective: 1000px），否则 3D 深度感极弱 - 若父容器本身有
transform（如translateZ(-50px)），它也会参与 3D 空间计算，需留意相对位置
preserve-3d 和 flat 的实际差异
设为 flat（默认值）时，子元素的所有 3D 变换都会被强制投影回父容器的 XY 平面，Z 轴信息丢失；设为 preserve-3d 后，子元素的 transform（包括 translateZ、rotateY）才真正按三维坐标系叠加。
典型表现：一个旋转的立方体，若中间容器漏设 preserve-3d，你会看到六个面“错位重叠”，像被压扁的纸片，而不是立体结构。
立即学习“前端免费学习笔记（深入）”；
-
preserve-3d不继承，必须显式写在每一级需要维持 3D 上下文的父容器上 - 一旦某层设了
transform-style: flat（或没写，默认就是 flat），其所有后代都脱离该 3D 空间，哪怕再写preserve-3d也无效 - 性能提示：过度嵌套
preserve-3d容器会增加合成层开销，Chrome DevTools 的 Layers 面板可观察是否意外触发了过多 3D 层
必须配合 perspective 才能看见深度
transform-style: preserve-3d 只是开启空间，不提供“镜头”。没有 perspective，所有 Z 轴移动都只是线性缩放，没有近大远小的视觉纵深。
推荐写法：在 3D 容器的父级（通常是舞台容器）上设 perspective: 1200px；不要只在子元素上用 transform: perspective(1200px)，那样视角中心会偏移且难控制。
-
perspective值越小，透视越夸张（如 200px 像凑很近看）；越大越接近正交投影（如 5000px 几乎看不出纵深） - 避免在
body或html上直接设perspective，会导致整个页面元素受透视影响，布局易错乱 - 如果用
transform: perspective()（函数形式），它只作用于单个元素，且会创建新 stacking context，慎用于滚动容器内
容易被忽略的渲染边界问题
即使 preserve-3d 和 perspective 都正确，仍可能看不见背面或部分面——不是代码错，而是元素被裁剪了。
根本原因：CSS 3D 渲染时，浏览器会基于容器的 overflow 和 clip-path 进行裁剪，而 3D 变换后的元素可能超出原始盒模型范围。
- 确保 3D 容器的
overflow是visible（默认值），禁用overflow: hidden - 避免给 3D 容器设
border-radius（尤其带overflow: hidden时），圆角会强制裁剪 3D 元素 - 若用
backface-visibility: hidden控制面朝向，注意它只影响绘制，不解决裁剪问题；真要隐藏背面请用transform: rotateY(180deg)+visibility: hidden配合逻辑判断
transform-style、perspective 和裁剪控制是否连贯。最容易卡住的地方，其实是第二层容器忘了设 preserve-3d，或者第一层容器被 overflow: hidden 默默截断了。 
