透视

perspective CSS 属性确定 z=0 平面与用户之间的距离，以便为 3D 定位的元素提供一些透视感。

试试

语法

css

/* Keyword value */
perspective: none;

/* <length> values */
perspective: 20px;
perspective: 3.5em;

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

值

none: 表示不应用透视变换。
<length>: 一个 <length> 表示用户到 z=0 平面的距离。它用于将透视变换应用于元素的子元素。负值是语法错误。如果值小于 1px，则会将其钳制到 1px。

描述

每个 z>0 的 3D 元素都会变大；每个 z<0 的 3D 元素都会变小。效果的强度由此属性的值决定。perspective 的值越大，变换越小；perspective 的值越小，变换越大。

位于用户身后的 3D 元素部分 - 即其 z 轴坐标大于 perspective CSS 属性的值 - 不会绘制。

消失点 默认情况下放置在元素的中心，但其位置可以通过 perspective-origin 属性更改。

将此属性与 none 以外的值一起使用会创建一个新的堆叠上下文。此外，在这种情况下，该对象将充当其包含的 position: fixed 元素的包含块。

正式定义

初始值	`none`
应用于	可变换元素
继承	否
计算值	绝对长度或 `none`
动画类型	一个长度
创建堆叠上下文	是

正式语法

perspective = 
  none            |
  <length [0,∞]>

示例

设置透视

在使用 CSS 变换 > 设置透视中给出了一个示例，展示了立方体在 perspective 设置在不同位置时的变化。

规范

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

浏览器兼容性

BCD 表格只在浏览器中加载

另请参阅

使用 CSS 变换