透视
Perspective
中级通用透视（Perspective）是 CSS 里决定 3D 效果「近大远小」程度的属性，可以理解成眼睛离屏幕有多远。没有透视时，转过角度的元素只是被压扁；有了透视，靠近你的一侧变大、远的一侧变小，界面才有立体感。
你可能会说：「我把卡片转了个角度，看起来只是变窄了，一点都不立体，要怎么做出那种斜着摆在空间里的效果？」
读之前建议先了解
动手看看眼睛离屏幕多远
要点透视是怎样起作用的？
- 1
数值就是眼睛离屏幕的距离
perspective: 600px 的意思是：假设你的眼睛在屏幕前 600 像素的地方看这个元素。数值越小，眼睛越贴近，近大远小越夸张，像广角镜头；数值越大越平，到两三千像素时几乎看不出透视。做卡片翻转、倾斜这类界面效果，一般用 600~1200px。perspective-origin 则决定眼睛在哪个方向，默认在正中间。
- 2
写在父元素上，一组元素共用一个空间
透视有两种写法：在父元素上写 perspective 属性，或者在元素自己的 transform 里写 perspective() 函数。最容易混淆的就是这两者的差别：写在父元素上，所有子元素共用同一个消失点，一排卡片看起来像摆在同一个空间里，越靠边的转得越明显；写在每个元素自己身上，每个元素都有自己的消失点，一排卡片长得一模一样，像几张贴纸。一组元素要有整体的空间感，就写在父元素上。
- 3
只对 3D 变换起作用
透视本身不会改变任何东西，它只影响 rotateX、rotateY、translateZ 这些有深度方向的变换。元素没转、也没有前后位移时，加了透视也看不出区别。反过来，用了 3D 旋转却忘了加透视，就会出现「转了但只是变窄」的效果。
容易混淆的地方
透视决定的是「怎么看」，3D 变换决定的是「东西摆在哪、朝哪」，两者配合才有立体效果。透视也和 z-index 无关：z-index 只决定平面上谁盖住谁，不会产生近大远小。设计里常说的「透视构图」是一种画法，CSS 的 perspective 是把这种观察方式交给浏览器来计算。
什么时候用
适合用
- 做卡片翻转效果时，给卡片的父元素加 perspective，翻转才有立体感。
- 官网展示一排产品截图斜着摆放，用父元素的透视让整排共享同一个空间。
- 做鼠标跟随倾斜的卡片，需要透视让倾斜有近大远小的效果。
不适合用
- 只想让元素在平面上放大缩小或移动时，不需要透视；用普通的 scale 和 translate。
- 想让元素盖在另一个元素上面时，透视解决不了层叠问题；用 z-index 和定位。
- 需要真正可旋转、带光照的 3D 模型时，CSS 透视力不从心；改用 WebGL 或 Three.js。
练一练选一个答案，看看解释
你给一排五张产品截图都加了 rotateY(30deg)，结果五张看起来一模一样，没有整排摆在空间里的感觉。最可能的原因是？
让 AI 帮你做复制给 AI Agent 直接用
请检查并调整【使用了 3D 效果的区域，如：官网首屏斜着摆放的产品截图】的透视设置。先阅读相关组件和样式，找出用了 rotateX、rotateY、translateZ 的元素，确认透视是写在父元素上还是写在每个元素的 transform 里。要求：一组需要共享空间感的元素，把 perspective 统一写在它们共同的父元素上，数值在 600~1200px 之间按效果选择，需要时用 perspective-origin 调整视角；去掉重复的 perspective() 函数。不改变元素原有的位置和动画逻辑，不改无关代码。最后说明调整前后的视觉差别，以及在窄屏手机上是否仍然清晰可读。