perspective-origin

**perspective-origin** CSS 属性确定观察者正在查看的位置。它被 perspective 属性用作消失点。

试一试

**perspective-origin** 和 perspective 属性附加到三维空间中变换的子元素的父元素上，这与 perspective() 变换函数不同，后者放置在被变换的元素上。

语法

css
/* One-value syntax */
perspective-origin: x-position;

/* Two-value syntax */
perspective-origin: x-position y-position;

/* When both x-position and y-position are keywords,
   the following is also valid */
perspective-origin: y-position x-position;

/* Global values */
perspective-origin: inherit;
perspective-origin: initial;
perspective-origin: revert;
perspective-origin: revert-layer;
perspective-origin: unset;

值

x 轴位置

指示消失点的横坐标位置。它可以具有以下值之一

  • <length-percentage> 表示位置为绝对长度值或相对于元素宽度的相对值。该值可以为负。
  • left，一个关键字，是 0 长度值的快捷方式。
  • center，一个关键字，是 50% 百分比值的快捷方式。
  • right，一个关键字，是 100% 百分比值的快捷方式。
y 轴位置

指示消失点的纵坐标位置。它可以具有以下值之一

  • <length-percentage> 表示位置为绝对长度值或相对于元素高度的相对值。该值可以为负。
  • top，一个关键字，是 0 长度值的快捷方式。
  • center，一个关键字，是 50% 百分比值的快捷方式。
  • bottom，一个关键字，是 100% 百分比值的快捷方式。

正式定义

初始值50% 50%
应用于可变换元素
继承否
百分比指的是边界框的大小
计算值对于 <length> 为绝对值，否则为百分比
动画类型长度、百分比或计算值的简单列表

正式语法

perspective-origin = 
  <position>  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<length-percentage> = 
  <length>      |
  <percentage>

示例

更改透视原点

一个显示如何更改perspective-origin 的示例在 使用 CSS 变换 > 更改透视原点 中给出。

规范

规范
CSS 变换模块级别 2
# perspective-origin-property

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅