CSS - 透视属性

CSS 属性 **perspective** 指定了 **z=0** 平面与用户之间的距离。它有助于为三维定位元素提供一些透视效果。

**perspective** 属性的值决定了效果的强度。
透视值越大，变换越小；透视值越小，变换越大。
每个具有 **z>0** 的三维元素都将更大，而具有 **z<0** 的元素将更小。
当 z 轴坐标的值大于 **perspective** 的值时，元素无法绘制在三维空间中。
默认情况下，消失点（即查看者/用户正在查看的位置）位于 **中心**。
可以使用 CSS 属性 **perspective-origin** 更改消失点。
当为该属性传递非 **none** 值时，它会充当具有 **position: fixed** 值的元素的包含块。

可能的值

CSS 属性 **perspective** 可以具有以下值之一：

1. **none**：不应用透视变换。

2. **<length>**：指定用户到 z=0 平面的距离。

将透视变换应用于元素的子元素。
不允许使用负值，会被视为语法错误。
小于 **1px** 的值会被钳制为 **1px**。

应用于

所有可变换元素。

语法

perspective = none | <length>

CSS perspective - <length> 值

以下示例演示了使用具有不同 <length> 单位值的 CSS 属性 **perspective**。

<html>
<head>
<style>
   .container {
      width: 150px;
      height: 150px;
      margin: 75px 0 0 75px;
      border: none;
   }

   .cube {
      width: 50%;
      height: 50%;
      perspective-origin: 120% 120%;
      transform-style: preserve-3d;
      padding: 50px;
   }

   .face {
      position: absolute;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      line-height: 80px;
      font-size: 3.5em;
      color: white;
      text-align: center;
   }

   .front {
      background: rgba(178, 0, 178, 0.5);
      transform: translateZ(50px);
   }

   .back {
      background: rgba(178, 178, 0, 0.5);
      color: black;
      transform: rotateY(180deg) translateZ(50px);
   }

   .right {
      background: rgba(0, 0, 178, 0.5);
      transform: rotateY(90deg) translateZ(50px);
   }

   .left {
      background: rgba(178, 0, 0, 0.5);
      transform: rotateY(-90deg) translateZ(50px);
   }

   .top {
      background: rgba(0, 200, 0);
      transform: rotateX(90deg) translateZ(50px);
   }

   .bottom {
      background: rgba(0, 0, 0, 0.2);
      transform: rotateX(-90deg) translateZ(50px);
   } 

   
   .length-cm {
      perspective: 10cm;
   }

   .length-em {
      perspective: 15em;
   }

   .length-px {
      perspective: 200px;
   }

   .length-neg {
      perspective: -100px;
   }
   
</style>
</head>
<body>   
   <h1>perspective</h1>
   
   <div class="container">
   <p>perspective: 10cm</p>
   <div class="cube length-cm">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>

   <p>perspective: 15em</p>
   <div class="cube length-em">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>
   
   <p>perspective: 200px</p>
   <div class="cube length-px">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>
   
   <p>perspective: -100px</p>
   <div class="cube length-neg">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>
   </div>   
</body>
</html>

CSS perspective - none 值

以下示例演示了使用值为 **none** 的 CSS 属性 **perspective**。

<html>
<head>
<style>
   .container {
      width: 150px;
      height: 150px;
      border: none;
   }

   .cube {
      width: 50%;
      height: 50%;
      perspective: none;
      perspective-origin: 120% 120%;
      transform-style: preserve-3d;
   }

   .face {
      position: absolute;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      line-height: 80px;
      font-size: 3.5em;
      color: white;
      text-align: center;
   }

   .front {
      background: rgba(178, 0, 178, 0.5);
      transform: translateZ(50px);
   }

   .back {
      background: rgba(178, 178, 0, 0.5);
      color: black;
      transform: rotateY(180deg) translateZ(50px);
   }

   .right {
      background: rgba(0, 0, 178, 0.5);
      transform: rotateY(90deg) translateZ(50px);
   }

   .left {
      background: rgba(178, 0, 0, 0.5);
      transform: rotateY(-90deg) translateZ(50px);
   }

   .top {
      background: rgba(0, 200, 0);
      transform: rotateX(90deg) translateZ(50px);
   }

   .bottom {
      background: rgba(0, 0, 0, 0.2);
      transform: rotateX(-90deg) translateZ(50px);
   } 
</style>
</head>
<body>   
   <div class="container">
   <p>perspective: none</p>
   <div class="cube">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>
   </div>   
</body>
</html>

打印页面