CSS perspective() 函数

定义和用法

CSS perspective() 函数定义了用户与 z=0 平面之间的距离。

perspective() 函数在 transform 属性中使用。

实例

使用 perspective() 为两个立方体添加一些透视效果：

.cube1 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(5cm) rotateX(-15deg) rotateY(30deg);
}

.cube2 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(10cm) rotateX(-15deg) rotateY(30deg);
}

亲自试一试

CSS 语法

perspective(length|none)
值 描述
length 必需。指定用户到 z=0 平面的距离。none 表示不进行变换。

技术细节

版本： CSS Transforms Module Level 2

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

Chrome Edge Firefox Safari Opera
perspective()
12 12 10 4 15
perspective(none)
97 97 93 15.4 83

相关页面

教程：CSS 3D 变换

参考：CSS transform 属性

参考：CSS rotate() 函数

参考：CSS rotate3d() 函数

参考：CSS rotateX() 函数

参考：CSS rotateY() 函数

参考：CSS rotateZ() 函数