perspective必须设在3d子元素的父容器上，不是目标元素自身；否则rotatey、translatez等变换无法产生近大远小的立体感。它定义观察者位置，仅对直系子元素生效，且须配合transform-style: preserve-3d保留z轴坐标，三者缺一不可。
直接说结论：perspective 必须设在**3D子元素的父容器上**，不是目标元素自己；否则 rotateY、translateZ 等变换不会产生近大远小的立体感——这是 90% 初学者卡住的第一步。
为什么 perspective 写在 .cube 上没效果？
perspective 定义的是“观察者眼睛的位置”，它只对**直系子元素**生效。写在要动的元素（比如 .cube）上，等于让“眼睛”贴在盒子表面，子面（.face）根本没机会按 Z 距离做投影。
- 错误写法：
.cube { perspective: 800px; transform: rotateY(45deg); }→ 子面被扁平渲染，无透视 - 正确结构：外层加
.scene容器，.scene { perspective: 800px; }，再把.cube放进它里面 - 注意：
perspective不继承，也不能靠写在body上一劳永逸；嵌套深了（比如 .scene > .group > .cube），中间的.group若也参与 3D 变换，就得单独加perspective
perspective 值怎么选才不翻车？
值不是越大越好，也不是越小越“酷”。它决定视觉失真程度和空间压缩比：
-
perspective: 300px：视点极近，translateZ(100px)就会明显拉伸变形，适合强动感卡片翻转 -
perspective: 1200px：接近人眼正常视距，rotateY(30deg)看起来自然，适合 UI 层级浮起（如按钮悬停） -
perspective: 3000px：几乎无缩放变化，接近正交投影，适合需要精确对齐的 3D 布局（如仪表盘面板） - 关键限制：
translateZ的绝对值不能 ≥perspective值，否则元素会“穿模”到视点后方，直接消失（例如perspective: 500px+translateZ(600px)→ 黑屏）
为什么加了 perspective 还是平面旋转？
因为缺了 transform-style: preserve-3d。没有它，浏览器会把所有子元素强行拍平到父元素的 XY 平面，Z 轴坐标被丢弃——translateZ(100px) 白写。
- 必须加在**设置了 3D 变换的父元素上**（如
.cube），不是最外层.scene - 如果子元素（如
.face）内部还要嵌套图标并做 3D 动画，那它的父级（即.face）也得加这句，否则下一层又扁平化 - 旧版 Safari 需补
-webkit-transform-style: preserve-3d - 别和
backface-visibility: hidden混用：后者要加在每个需隐藏背面的子元素（如.face）上，不是父容器
最容易被忽略的其实是组合逻辑：perspective 提供观察基准，transform-style: preserve-3d 保有空间坐标，rotateX/rotateY/translateZ 才真正驱动位置——三者缺一不可，且层级关系不能错。DOM 结构和 CSS 选择器顺序稍一乱，整个 3D 空间就塌成一张纸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
