CSS 数据类型

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

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

属性值

视角() 函数采用单个参数，可以是以下之一:

  • d:它是一个 <length> 值，表示用户与 z=0 平面之间的距离。当 d 的值为 0 或负数时，不会对元素应用透视变换。

  • none:不对元素设置透视。

语法

perspective(d)

  • <length> 值或无传递给函数。

  • z=0 是二维视图中所有内容出现的空间。

  • 负值被视为无效并且是语法错误。

  • 小于或等于 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>