perspective只作用于子元素而非自身，因为它定义的是观察者到z=0平面的距离，为子元素创建共享3d观察空间；必须配合transform-style: preserve-3d启用子元素3d坐标系，否则子元素被拍平，透视失效。
perspective 为什么只作用于子元素，而不是自身？
因为 perspective 不是「让当前元素自己变透视」，而是「为它的子元素创建一个共享的 3D 观察空间」。就像在舞台上架一台摄像机——摄像机（perspective）装在舞台框（父容器）上，拍的是台上的演员（子元素），不是拍舞台框自己。
常见错误现象：给某个 div 自己加了 transform: rotateY(45deg) 和 perspective: 600px，结果没透视效果。原因就是它没子元素，或者子元素没启用 3D 渲染上下文。
- 必须配合
transform-style: preserve-3d才能让子元素真正“待在 3D 空间里”；否则浏览器会把子元素扁平化到 2D 平面，透视就失效了 -
perspective值越小（如200px），相当于摄像机靠得越近，Z 轴位移（比如translateZ(100px)）带来的缩放/变形越明显 - 值过大（如
2000px）会让 3D 效果趋近于平面旋转，容易误判“没生效”
为什么加了 perspective 后子元素位置看起来“偏了”？
这不是 bug，是透视投影的必然结果。一旦启用 perspective，所有带 Z 轴变换（translateZ、rotateX 等）的子元素，其渲染坐标会按透视公式重新计算——离观察者近的变大、偏上/偏下，远的变小、收缩。
典型场景：一个 div 里有两个 span，都设了 transform: translateZ(50px)，但一个还加了 rotateY(30deg)，它们在透视空间里的实际屏幕坐标就不再对齐，视觉上就像“错位”了。
- 这种偏移无法用
margin或top/left精确补偿，因为它是动态投影结果 - 如果需要保持布局对齐，优先考虑用
transform-origin调整旋转基点，而不是硬调位置 - 移动端 iOS Safari 对
perspective的默认处理较弱，常需显式设置父容器perspective才能触发 3D 渲染管线
perspective 和 transform-style: preserve-3d 必须成对出现吗？
不是“必须”，但几乎总是要一起用。单独设 perspective 只建了摄像机，没告诉浏览器“演员要保留在 3D 空间里”。transform-style: preserve-3d 才是那个开关——它让子元素的 Z 坐标不被丢弃，才能参与透视计算。
容易踩的坑：transform-style 不继承，所以即使父容器设了 perspective，也得在**直接包裹 3D 子元素的那个父级**上显式写 transform-style: preserve-3d。
- 错误写法：
.container { perspective: 800px; } .item { transform: rotateX(45deg); }→ 无效，因为没开 preserve-3d - 正确写法：
.container { perspective: 800px; transform-style: preserve-3d; } .item { transform: rotateX(45deg); } - 注意：
preserve-3d在部分旧版 Android WebView 中不支持，可降级为flat+ 单元素独立perspective
为什么 perspective 值设成 0 或 none 就完全没效果？
perspective: none 等价于 0，意味着“摄像机贴在屏幕上”，此时所有 Z 轴深度信息被压缩为零，透视投影退化为正交投影——3D 变换只剩旋转缩放，没有远近感。
另一个隐蔽问题：某些 CSS 预处理器（如 Sass）或构建工具会把无单位数值（如 perspective: 500）自动补成 500px，但规范要求必须带单位（px、rem 等）。Chrome 90+ 已开始严格校验，无单位会被忽略。
- 务必写
perspective: 500px，而不是perspective: 500 - 不要依赖
none来“关闭”透视——直接删掉该声明更可靠 - 调试时可用
perspective-origin: center center固定观察点，避免因默认 origin 偏移导致定位漂移
perspective、transform-style、transform 三者构成的最小闭环；漏掉任意一环，3D 就会塌回 2D。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
