CSS 函式 - translateZ()

CSS 中的 translateZ() 函式用於沿 Z 軸（即 3D 空間中遠離或靠近檢視者）平移或移動元素。它是 CSS 中的轉換函式之一，允許您修改網頁上元素的位置和外觀。結果是 <transform-function> 資料型別。

可能的值

translateZ() 函式只能接受一個引數。

tz：它是一個 <length> 值，用於指定元素或元素移動的距離。表示平移向量的 z 分量 [0, 0, tz]。正值將元素移向檢視者，負值將元素移離檢視者。

語法

transform: translateZ(tz);

perspective() 函式定義了計算機螢幕平面與您應用 translateZ 的 HTML 元素之間的虛擬距離。

使用 perspective() 和 translateZ() 函式會出現一些意外的行為。

當提供給 translateZ() 的值大於或等於 perspective() 的值時，應用它的 HTML 元素將消失。

除了零值（0px、0、0em）之外，任何值都允許用於 perspective()，因為它會導致 translateZ() 效果被忽略。

CSS translateZ() - 懸停時的平移

以下是在按鈕上使用偽類 :hover 與 translateZ() 函式的示例。按鈕的大小和位置在懸停時會發生變化

<html>
<head>
<style>
   div {
      height: 200px;
      width: 300px;
      border: 5px solid black;
      background-color: beige;
      margin: 50px;
      display: inline-block;
   }
   
   button {
      transform: perspective(150px) translateZ(20px);
      transition: transform 100ms linear;
      width: 80px;
      height: 30px;
      background-color: blue;
      color: white;
      margin: 30px;
   }

   button:hover {
      transform: perspective(150px) translateZ(80px);
   }
</style>
</head>
<body>
   <div>
      <h2>translateZ() example</h2>
      <button>click</button>
   </div>
</body>
</html>

CSS translateZ() - 帶有 perspective() 的平移

以下是在 perspective() 以及 translateZ() 函式一起使用的示例。應用該函式的 div 元素的位置基於傳遞給 translateZ() 函式的值。

<html>
<head>
<style>
   div {
      height: 110px;
      width: 110px;
      border: 2px solid black;
      background-color: aquamarine;
      margin: 15px;
   }

   .translate-z-length {
      transform: perspective(200px) translateZ(50px);
      background-color: tomato;
   }
</style>
</head>
<body>
   <div>No translateZ() applied</div>
   <div class="translate-z-length">translateZ() applied</div>
</body>
</html>

更改 perspective() 和 translateZ() 的值以檢視效果。

perspective() 函式負責相對於平面（即螢幕表面 (z=0)）定位檢視者。因此，在上面的示例中，200px 的值意味著使用者在影像前面 200 畫素。

translateZ() 的值 50px 表示元素從螢幕向外移動 50px，朝向使用者。在 2D 顯示器上檢視時，元素看起來更大。

函式的編寫順序很重要，因為轉換的組合不是可交換的。perspective() 函式應放在 translateZ() 函式之前。

列印頁面