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>

列印頁面