透视属性
最后更新：2026-09-13
perspective 透视属性
perspective 用于定义 3D 变换的透视强度，即观察者眼睛到 z=0 平面的距离。值越小，透视效果越强（近大远小越夸张）；值越大，透视越平缓。该属性需要设置在应用 3D 变换元素的父元素上，是构建真实立体场景的基础。
| 分类 | |
|---|---|
| 初始值 | none |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
perspective: none | <length>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
none | 关键字 | 无透视 |
<length> | 类型 | 透视距离 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| perspective | ✓ v36 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v23 |
| 所有主流浏览器均支持 | |||||
提示： perspective 必须设置在父元素上，影响其所有应用 3D 变换的子元素；值通常取 500px~1500px 之间效果自然。
重要： none 表示无透视（相当于无限远），3D 变换会呈现正交投影效果，看起来没有纵深感。
❓ 常见问题
Qperspective 和 perspective-origin 有什么关系？
Aperspective 定义观察者到 z=0 平面的距离，决定透视强度（近大远小的夸张程度）；perspective-origin 定义观察者视线方向在容器上的落点，决定从哪个角度看场景。两者都是 3D 观察的必要参数，设置在同一个父容器上，共同决定子元素 3D 变换的呈现。
Q为什么设置了 rotateY 但没有立体感？
A通常是父元素缺少 perspective，旋转后是平面效果；或父元素上有 overflow: hidden、opacity 小于 1、filter 等属性，会强制建立平面上下文把 3D 拍平。也可改用 transform: perspective(800px) rotateY(45deg) 在元素自身施加透视。
Qperspective 值设多大合适？
A值是观察者到元素的距离，值越小透视越强、变形越夸张，值越大越接近正交投影。一般页面效果取 500px~1500px 比较自然，800px~1000px 是常见选择；想要夸张的「鱼眼」效果可以用 200px~400px。可以根据元素尺寸按比例调整，让旋转时边缘位移适中。
Qperspective 属性和 transform: perspective() 函数有什么区别？
Aperspective 属性写在父元素上，统一为所有 3D 子元素提供同一个视点，多个子元素共享同一透视；perspective() 函数写在某个元素自己的 transform 里，只作用于该元素，且受函数在列表中的位置影响。父级透视更符合真实场景，函数形式适合单独给某个元素加透视。
🏷️ 相关属性
💡 相关案例
📚 相关教程
