如何使用 CSS transform 屬性

變形效果可讓你在 2D 或 3D 空間中，移動、旋轉、縮放和扭曲元素。它們是一個非常酷的 CSS 功能，尤其是與動畫結合時。

2D 變形效果

transform 屬性接受以下函數：

  • translate() 移動元素
  • rotate() 旋轉元素
  • scale() 按比例縮放元素的大小
  • skew() 扭曲元素
  • matrix() 使用 6 個元素的矩陣執行上述任一操作，這種寫法不太直觀，但節省空間

我們還有具體軸的函數：

  • translateX() 在 X 軸上移動元素
  • translateY() 在 Y 軸上移動元素
  • scaleX() 按比例縮放元素在 X 軸上的大小
  • scaleY() 按比例縮放元素在 Y 軸上的大小
  • skewX() 扭曲元素在 X 軸上
  • skewY() 扭曲元素在 Y 軸上

以下是一個示例，使用變形效果將 .box 元素的寬度放大為原來的2倍，高度縮小為原來的一半：

.box {
  transform: scale(2, 0.5);
}

transform-origin 屬性可以設置變形的原點（即 (0, 0) 坐標），從而改變旋轉中心。

組合多個變形效果

你可以通過在每個函數之間使用空格將多個變形效果組合在一起。

例如：

transform: rotateY(20deg) scaleX(3) translateY(100px);

3D 變形效果

我們還可以進一步，在 3D 空間而不是 2D 空間中移動元素。在 3D 空間中，我們增加了另一個軸，即 Z 軸，使視覺效果更具深度。

使用 perspective 屬性，你可以指定 3D 對象與觀察者之間的距離。

示例：

.3Delement {
  perspective: 100px;
}

perspective-origin 屬性確定了觀察者的位置、我們是如何在 X 軸和 Y 軸上查看它的。

現在我們可以使用其他控制 Z 軸的函數，與 X 軸和 Y 軸的變形效果組合在一起：

  • translateZ()
  • rotateZ()
  • scaleZ()

以及對應的簡寫 translate3d()、rotate3d() 和 scale3d()，用於使用 translateX()、translateY() 和 translateZ() 函數等。