perspective属性必须加在父容器上而非变换元素自身，否则无效；需配合transform-style: preserve-3d维持子元素z轴空间关系，值宜设600px–1500px以保障自然纵深感。
perspective 属性不加在要动的元素上，就永远没有真实 3D 感——它只对子元素生效，且必须配合 transform-style: preserve-3d 才能维持 Z 轴空间关系。
为什么直接写 perspective: 800px 在 .card 上没效果
浏览器会忽略它。因为 perspective 定义的是“观察者到 Z=0 平面的距离”，这个距离是为子元素建立共享 3D 空间的前提，不是给自身加透视镜头。写在变换元素自己身上，等于让眼睛贴着盒子表面看，Z 轴位移和旋转全被压平成 2D 倾斜。
- ✅ 正确层级：
.scene { perspective: 1000px; }→.card { transform-style: preserve-3d; }→.card-front, .card-back是子元素 - ❌ 错误写法：
.card { perspective: 1000px; transform: rotateY(180deg); }——perspective不作用于自身，rotateY就只是个扁平翻转 - ⚠️ 特殊情况：若硬要写在自身，必须同时加
transform-style: preserve-3d，且仅影响其内部子内容（比如伪元素或嵌套div），实用性低、易出错
perspective 数值怎么选才不翻车
值不是越大越好，也不是越小越炫——它直接决定视觉纵深是否自然。数值过小会让元素在 90° 时缩成一条线；过大则退化为平行投影，失去“近大远小”的立体感。
- 桌面端安全范围：
600px–1200px，推荐从1000px起调 - 移动端建议上调至
1200px–1500px，避免小视口缩放后透视畸变 - 超小值（如
200px）适合强戏剧性短片头，但交互中极易造成视觉不适或元素消失 - 不要用
perspective: none或0来“关闭”透视——它会彻底断开 3D 渲染上下文，子元素自动压平
为什么加了 perspective 还是像 2D 倾斜
大概率是缺了 transform-style: preserve-3d，或者父级有干扰样式截断了 3D 层级。这个属性不继承，只对直系子元素起效，且一旦祖先节点设置了 overflow: hidden、filter、或任意 transform（包括 translateZ(0)），都可能触发新的层叠上下文，把 3D 子树“剪掉”。
- 必须加在直接包裹 3D 子面的容器上，例如
.card-inner，而不是外层.card-list - Safari 旧版（iOS 15.4 之前）需补
-webkit-transform-style: preserve-3d - 如果用了
backface-visibility: hidden却仍看到双面重叠，先检查是否漏加preserve-3d，再确认是否两个面都独立写了该声明
真正卡住人的从来不是语法写错，而是 DOM 层级和 CSS 属性的归属关系没对齐：谁定义视点、谁参与空间、谁控制露脸——三者必须落在精确对应的节点上，差一层，整个 3D 效果就塌陷成 2D。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
