CSS - scale3d()

CSS 中的scale3d()函式用於在三維平面上對元素應用縮放變換（調整大小）。該函式可以以不同的比例在不同的方向上調整元素大小，因為縮放量由向量[sx, sy, sz]定義。結果為<transform-function>資料型別。

縮放變換由一個三維向量確定，其座標指定每個方向上的縮放或調整大小的程度。
當所有三個座標相等時，縮放將是均勻的（各向同性的），並且元素的縱橫比將保持不變。這種形式的縮放變換稱為相似變換。
如果座標值超出[-1, 1]範圍，則元素將在指定的維度上增長。
如果座標值在[-1, 1]範圍內，則元素將在指定的維度上縮小。
如果座標值為負，則會導致在指定維度上發生點反射。
當值為1時，它對元素的大小沒有影響。

可能的值

scale3d()函式接受三個值作為引數，表示每個方向上要應用的縮放量。

sx：這是一個<number>值，表示縮放向量的橫座標（水平，x座標）。
sy：這是一個<number>值，表示縮放向量的縱座標（垂直，y座標）。
sz：這是一個<number>值，表示縮放向量的z分量。

語法

transform: scale3d(sx, sy, sz);

CSS scale3d() - 帶或不帶 transform-origin 值

以下是帶有和不帶 transform-origin 值的 scale3d() 函式示例

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

   .scaled-without-origin {
      background-color: pink;
      transform: perspective(500px) scale3d(1.5, 0.8, 0.2) translate(100px);
   }

   .scaled-with-origin {
      background-color: lightgreen;
      transform: perspective(500px) scale3d(1.5, 0.8, 0.2) translate(100px);
      transform-origin: right;
   }
</style>
</head>
<body>
   <section>
      <div>No function</div>
   </section>
   
   <section>
      <div class="scaled-without-origin">w/o transform-origin</div>
   </section>

   <section>
      <div class="scaled-with-origin">with transform-origin</div>
   </section>
</body>
</html>

列印頁面