CSS - scaleZ()

CSS 中的scaleZ()函式用於沿z軸對元素應用縮放變換（調整大小）。結果是<transform-function>資料型別。

該函式透過一個常數因子（非1）修改每個元素點的z座標。當縮放因子為1時，函式得到單位變換。scaleZ(-1)指定軸向對稱，其中z軸穿過變換原點。

可能的值

scaleZ()函式接受單個引數。

s：一個數字，表示應用於元素每個點的z座標的縮放因子。

語法

transform: scaleZ(s);

CSS scaleZ() - 正值和負值

以下是帶有正值和負值引數的scaleZ()函式示例

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-color: cyan;
      border: 2px solid black;
   }

   .scale-z-positive {
      background-color: pink;
      transform: perspective(800px) scaleZ(2) translateZ(-100px);
   }

   .scale-z-negative {
      background-color: lightgreen;
      transform: perspective(800px) scaleZ(-0.5) translateZ(-100px);
   }
</style>
</head>
<body>
   <section>
      <p>No function</p>
      <div></div>
   </section>
   
   <section>
      <p>+ve scaleZ()+translateZ()</p>
      <div class="scale-z-positive"></div>
   </section>
   
   <section>
      <p>-ve scaleZ()+translateZ()</p>
      <div class="scale-z-negative"></div>
   </section>
</body>
</html>

列印頁面