CSS 2D 變形：平移、旋轉、縮放、傾斜與矩陣
平移
讓元素沿著 X 軸和 Y 軸移動。若為負值，方向相反。
translateX(): 平移元素，接受一個參數，表示在 X 軸上的移動距離。translateY(): 平移元素，接受一個參數，表示在 Y 軸上的移動距離。translate(): 平移元素，接受兩個參數，分別表示在 X、Y 軸上的移動距離。
要注意的是，平移只改變視覺呈現，不影響版面：
css
.box {
transform: translateX(100px);
}元素看起來往右移了 100px，但在文件流中仍佔著原位，旁邊的元素不會跟著挪動。這與改 margin-left 或 定位 的 left 有本質上的差別。
旋轉
讓元素以順時針或逆時針旋轉。
rotate(): 旋轉元素，接受一個參數，表示旋轉的角度值，單位可以是 deg（度數）、rad（弧度）等。單位的設定可以參考這篇 單位表示法。
縮放
改變元素的大小。
scaleX(): 縮放元素，接受一個參數，表示 X 軸的縮放比例。scaleY(): 縮放元素，接受一個參數，表示 Y 軸的縮放比例。scale(): 縮放元素，接受兩個參數，分別表示 X 軸和 Y 軸的縮放比例。
傾斜
讓元素以角度傾斜。
skewX(): 傾斜元素，接受一個參數，表示 X 軸的傾斜角度。skewY(): 傾斜元素，接受一個參數，表示 Y 軸的傾斜角度。skew(): 傾斜元素，接受兩個參數，分別表示 X 軸和 Y 軸的傾斜角度。
矩陣
結合以上所有功能。
matrix(): 使用矩陣進行複合變形，接受 6 個參數，分別表示縮放、傾斜和平移的組合。csstransform: matrix(scaleX, skewY, skewX, scaleY, translateX, translateY);- scaleX: X 軸的縮放比例。
- skewY: Y 軸的傾斜角度（以弧度為單位）。
- skewX: X 軸的傾斜角度（以弧度為單位）。
- scaleY: Y 軸的縮放比例。
- translateX: X 軸的平移距離（以像素為單位）。
- translateY: Y 軸的平移距離（以像素為單位）。
平移
css
transform: matrix(1, 0, 0, 1, x, y); /* 等同於 translate(x, y); */
transform: matrix(1, 0, 0, 1, 100, 100); /* 等同於 translate(100px, 100px); */旋轉
css
transform: matrix(
cos(deg),
sin(deg),
-sin(deg),
cos(deg),
0,
0
); /* rotate(deg); */
transform: matrix(0.5, 0.866, -0.866, 0.5, 0, 0); /* 等同於 rotate(60deg); */縮放
css
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); */傾斜
css
transform: matrix(1, tan(y deg), tan(x deg), 1, 0, 0); /* 等同於 skew(x, y); */
transform: matrix(1, 0.1763, 0.5774, 1, 0, 0); /* 等同於 skew(30deg, 10deg); */小提醒
- 通常用於需要精確控制多種變形效果的情況，例如：動畫或複雜的視覺效果。它將多個變形合併為一個函式，減少了多次使用單獨變形函式的需求。
- 不需加上單位，會自動轉換移動距離、縮放倍數、旋轉角度所需要的單位。
- 參數順序非常重要。
- 傾斜角度使用弧度而非角度，需要額外的轉換。
經典應用：置中
css
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}translate 的百分比以 元素自己的寬高 為基準，所以先移到容器中央、再往回移自身的一半，不必事先知道元素多大。現代版面也可以直接用 彈性盒子 或 格線 置中。
多個函式的順序
css
/* 先旋轉再平移：沿著轉過的座標軸位移 */
.a { transform: rotate(45deg) translateX(100px); }
/* 先平移再旋轉：先水平移動，再原地旋轉 */
.b { transform: translateX(100px) rotate(45deg); }一個 transform 可以串上多個函式，由左至右依序套用，座標軸也會跟著一起轉，因此順序換了結果就不同。
常用函式速查
| 函式 | 說明 |
|---|---|
translate(x, y) | 平移，百分比以自身尺寸為準 |
rotate(deg) | 旋轉，正值為順時針 |
scale(x, y) | 縮放，框線與文字會一起變 |
skew(x, y) | 傾斜 |
matrix() | 前四者的統一形式，通常由工具產生 |
變形的中心點由 transform-origin 決定。
常見問題
translate 的百分比是以什麼為基準？
以元素自己的寬高為基準，不是父層。這正是把元素往回移一半就能置中的原理，也是它比其他置中寫法方便的地方。
scale 會讓框線和文字一起變大嗎？
會。縮放是整體的視覺放大，框線寬度、字級與陰影都會跟著變。需要只放大尺寸而不影響細節時，得改用寬高或字級。
rotate 的正值是往哪個方向？
順時針。角度單位常用 deg，也可以使用圈數或弧度；負值則是逆時針。
matrix 有必要自己寫嗎？
幾乎不需要。它是前面幾個函式的統一形式，通常由工具或動畫函式庫產生，手寫可讀性很差。
