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>

列印頁面