translateZ() 单独使用无效，因浏览器默认将元素压平至 z=0 平面（transform-style: flat），无 perspective 则无景深参考系，Z 轴位移仅是数学偏移，不触发透视缩放或遮挡。
perspective 必须设在父容器上，translateZ() 才能产生真实景深位移效果；单独给元素加 translateZ() 而不配 perspective，视觉上完全没变化。
为什么 translateZ() 单独用无效？
CSS 的 translateZ() 本质是沿 Z 轴移动坐标，但浏览器默认把所有元素压平到 z=0 平面（即 transform-style: flat）。没有景深参考系，Z 方向位移就只是数学偏移，不触发透视缩放或遮挡关系。
- 错误写法：
.item { translateZ(100px); }—— 没父级perspective，等价于没写 - 正确结构：父容器设
perspective: 800px，子元素再用transform: translateZ(100px) - 注意：
translateZ()值不能是百分比，只接受px、rem等绝对单位，否则被忽略
perspective 放错位置的典型表现
常见错误是把 perspective 加在要动的元素自身上，比如：.card { perspective: 1000px; transform: translateZ(50px); }。这会导致该元素内部子元素才拥有景深，而它自己在父上下文中仍无深度感知。
- 正确层级：景深容器 → 子元素（带
transform-style: preserve-3d）→ 孙元素（用translateZ()） - 若省略
transform-style: preserve-3d，子元素会被强制拍平，translateZ()依然失效 -
perspective值越小（如300px），Z 轴位移带来的缩放/偏移越明显；值过大（如3000px）则近似 2D 效果
如何让多个元素呈现自然前后层次？
纯靠 z-index 只能控制绘制顺序，无法模拟真实空间距离感。真正有景深的布局需结合 perspective + translateZ() + 视觉线索（如阴影、模糊、尺寸缩放）。
- 示例结构：
.scene { perspective: 1000px; } .card { transform-style: preserve-3d; } .card-front { transform: translateZ(20px); } .card-back { transform: translateZ(-20px); } - 配合
box-shadow强化深度：离视线越近的元素，阴影越集中、越不透明；越远则越弥散、越淡 - 避免过度使用：Z 轴差值超过
perspective值的 1/3 时，可能因透视畸变导致元素严重拉伸或翻转
最容易被忽略的一点：perspective-origin 默认是 center center，但如果你的容器内容偏上或偏左，又没调整这个值，会导致 3D 效果“歪向一边”——不是代码错了，是观察视角没对准内容中心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
