CSS Transform - 2D 變形

平移

讓元素沿著 X 軸和 Y 軸移動。若為負值，方向相反。

• translateX(): 平移元素，接受一個參數，表示在 X 軸上的移動距離。
• translateY(): 平移元素，接受一個參數，表示在 Y 軸上的移動距離。
• translate(): 平移元素，接受兩個參數，分別表示在 X、Y 軸上的移動距離。

旋轉

讓元素以順時針或逆時針旋轉。

• rotate(): 旋轉元素，接受一個參數，表示旋轉的角度值，單位可以是 deg（度數）、rad（弧度）等。單位的設定可以參考這篇 單位表示法。

縮放

改變元素的大小。

• scaleX(): 縮放元素，接受一個參數，表示 X 軸的縮放比例。
• scaleY(): 縮放元素，接受一個參數，表示 Y 軸的縮放比例。
• scale(): 縮放元素，接受兩個參數，分別表示 X 軸和 Y 軸的縮放比例。

傾斜

讓元素以角度傾斜。

• skewX(): 傾斜元素，接受一個參數，表示 X 軸的傾斜角度。
• skewY(): 傾斜元素，接受一個參數，表示 Y 軸的傾斜角度。
• skew(): 傾斜元素，接受兩個參數，分別表示 X 軸和 Y 軸的傾斜角度。

矩陣

結合以上所有功能。

• matrix(): 使用矩陣進行複合變形，接受 6 個參數，分別表示縮放、傾斜和平移的組合。

  transform: matrix(scaleX, skewY, skewX, scaleY, translateX, translateY);

  • scaleX: X 軸的縮放比例。
  • skewY: Y 軸的傾斜角度（以弧度為單位）。
  • skewX: X 軸的傾斜角度（以弧度為單位）。
  • scaleY: Y 軸的縮放比例。
  • translateX: X 軸的平移距離（以像素為單位）。
  • translateY: Y 軸的平移距離（以像素為單位）。

平移

transform: matrix(1, 0, 0, 1, x, y);       /* 等同於 translate(x, y); */
transform: matrix(1, 0, 0, 1, 100, 100);   /* 等同於 translate(100px, 100px); */

旋轉

換算工具

transform: matrix(cos(deg), sin(deg), -sin(deg), cos(deg), 0, 0);  /* rotate(deg); */
transform: matrix(.5, .866, -.866, .5, 0, 0);                      /* 等同於 rotate(60deg); */

縮放

transform: matrix(w, 0, 0, h, 0, 0);      /* 等同於 scale(w, h); */
transform: matrix(1.5, 0, 0, 1.2, 0, 0);  /* 等同於 scale(1.5, 1.2); */

傾斜

換算工具

transform: matrix(1, tan(y deg), tan(x deg), 1, 0, 0);   /* 等同於 skew(x, y); */
transform: matrix(1, .1763, .5774, 1, 0, 0);             /* 等同於 skew(30deg, 10deg); */

小提醒

• 通常用於需要精確控制多種變形效果的情況，例如動畫或複雜的視覺效果。它將多個變形合併為一個函數，減少了多次使用單獨變形函數的需求。
• 不需加上單位，會自動轉換移動距離、縮放倍數、旋轉角度所需要的單位。
• 參數順序非常重要。
• 傾斜角度使用弧度而非角度，需要額外的轉換。