透视原点属性

最后更新：2026-09-13

perspective-origin 透视原点属性

perspective-origin 用于定义 3D 透视的观察者位置，即视点（消失点）在元素上的投影位置。默认是元素中心（50% 50%），调整该值可以改变观察立体场景的角度，例如从上方俯视、从侧面斜视等，配合 perspective 使用。

perspective-origin: [<length-percentage> | left | center | right] [<length-percentage> | top | center | bottom];

值	类型	描述
`<length> \| <percentage>`	类型	透视原点坐标
`left \| center \| right \| top \| bottom`	关键字	预定义位置

编辑下方代码，在 playground 中查看实时效果：

浏览器	Chrome	Edge	Firefox	Safari	Opera
perspective-origin	✓ v36	✓ v12	✓ v16	✓ v9	✓ v23
所有主流浏览器均支持

提示： 百分比基准是应用 perspective 的元素自身尺寸；使用 left/right/top/bottom 关键字更直观。

提示： 改变 perspective-origin 不会影响 2D 变换的效果，只在 3D 变换（rotateX/Y、translateZ）中体现差异。

Qperspective-origin 和 transform-origin 有什么区别？

Aperspective-origin 设置在带 perspective 的父元素上，定义观察者视点在场景中的投影位置，影响所有 3D 子元素共享的透视方向；transform-origin 设置在单个元素上，定义该元素自身变换的基准点。前者管「从哪里看」，后者管「绕着哪里变」。

Q如何让元素呈现「仰视」效果？

A把观察点放到元素下方：perspective-origin: 50% 100% 相当于视点在容器底部中央，观察者从下往上看，元素呈现仰视视角。同理 0% 50% 是从左侧看、100% 50% 是从右侧看、50% 0% 是从上方俯视。再配合旋转角度的调节即可获得想要的视角。

Qperspective-origin 的百分比是相对于什么的？

A相对于设置了 perspective 的父元素自身尺寸。0% 0% 是左上角，100% 100% 是右下角，默认 50% 50% 是中心。除了百分比还可使用 left、center、right、top、bottom 关键字和长度值。它不影响 2D 变换，只在 3D 变换中体现差异。

Q为什么改了 perspective-origin 却看不到变化？

Aperspective-origin 只影响有透视的 3D 变换。如果子元素没有 rotateX/Y、translateZ 这类 3D 变换，或父元素没有设置 perspective，改变视点位置不会产生任何视觉差异。另外当透视距离很远（值很大）时，不同视点之间的差别也会非常微弱。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。