CSS - perspective() 函数

CSS 函数 `perspective()` 用于 3D 变换的上下文中。它用于定义元素的透视深度，从而创建一个可以发生变换的 3D 空间。它接受一个单一值作为参数，该值表示观察者到 z=0 平面的距离。结果是 `` 数据类型。

CSS 函数 `perspective()` 是应用于要变换的元素的 `transform` 值的一部分。`perspective()` 函数与属性 perspective 和 perspective-origin 的区别在于，后两者与在三维空间中变换的子元素的父元素相关。

可能的值

`perspective()` 函数接受一个单一参数，可以是以下值之一：

`d`：这是一个 <length> 值，表示用户与 z=0 平面之间的距离。当 d 的值为 0 或负值时，则不会对元素应用透视变换。
`none`：不对元素设置透视。

语法

perspective(d)

将 <length> 值或 `none` 传递给函数。
z=0 是所有内容都显示为二维视图的空间。
负值被认为是无效的，是语法错误。
小于或等于零的值将被钳制为 `1px`。
除 `none` 之外的任何值都会使 z 位置为正的元素看起来更大，而 z 位置为负的元素看起来更小。
z 位置等于或大于透视值的元素会消失。
当 `perspective()` 值较大时，变换较小，反之亦然。
`perspective(none)` 指定来自无限远处的透视，因此不应用任何变换。

CSS perspective() - 基本示例

下面的示例演示了 `perspective()` 函数的使用，它显示了参数 `d` 的各种值。

<html>
<head>
<style>
   .face {
      position: absolute;
      width: 100px;
      height: 100px;
      line-height: 100px;
      font-size: 100px;
      text-align: center;
   }

   p + div {
      width: 100px;
      height: 100px;
      transform-style: preserve-3d;
      margin-left: 100px;
      padding: 25px;
   }
   .without-perspective {
      transform: rotateX(-15deg) rotateY(30deg);
   }

   .with-perspective-none {
      transform: perspective(none) rotateX(-15deg) rotateY(30deg);
   }

   .with-perspective-larger {
      transform: perspective(8cm) rotateX(-15deg) rotateY(30deg);
   }

   .with-perspective-smaller {
      transform: perspective(3.1cm) rotateX(-15deg) rotateY(30deg);
   }

   .top {
      background-color:lightyellow;
      transform: rotateX(90deg) translate3d(0, 0, 50px);
   }

   .left {
      background-color:teal;
      transform: rotateY(-90deg) translate3d(0, 0, 50px);
   }

   .front {
      background-color: cadetblue;
      transform: translate3d(0, 0, 50px);
   }
</style>
</head>
<body>
   <p>Without perspective:</p>
   <div class="without-perspective">
      <div class="face front">1</div>
      <div class="face top">2</div>
      <div class="face left">3</div>
   </div>

   <p>With perspective (none):</p>
   <div class="with-perspective-none">
      <div class="face front">1</div>
      <div class="face top">2</div>
      <div class="face left">3</div>
   </div>

   <p>With perspective (8cm):</p>
   <div class="with-perspective-larger">
      <div class="face front">1</div>
      <div class="face top">2</div>
      <div class="face left">3</div>
   </div>

   <p>With perspective (3.1cm):</p>
   <div class="with-perspective-smaller">
      <div class="face front">1</div>
      <div class="face top">2</div>
      <div class="face left">3</div>
   </div>
</body>
</html>

打印页面