CSS 變形 transform：能做什麼與怎麼開始
transform 是一個 CSS 屬性，用來讓 HTML 元素進行 2D 或 3D 的轉換（變形），像是移動、旋轉、縮放、傾斜等等。它不會改變元素原本在文件流中的位置，但可以視覺上改變它的樣子或位置。也因為不影響版面，它是做動畫時最流暢的屬性之一，詳見 動畫的效能。
2D 變形
在 X、Y 兩軸上平移、旋轉、縮放與傾斜元素。外觀變了，但它在 HTML 中的實際位置不變。
| 函式 | 說明 |
|---|---|
translate | 平移，沿 X、Y 軸位移。 |
rotate | 旋轉。 |
scale | 縮放。 |
skew | 傾斜。 |
matrix | 矩陣，把上述變形合併成一次運算。 |
詳細用法請見 2D 變形 。
3D 變形
讓元素在三維空間中旋轉與位移，做出翻牌、立體卡片這類效果。開啟立體感的關鍵是 perspective，它決定觀察者與畫面的距離。
| 屬性／函式 | 說明 |
|---|---|
perspective | 透視距離，立體感的關鍵，數值越小越誇張。 |
rotateX、rotateY、rotateZ | 沿三個軸旋轉。 |
translateZ、scaleZ | 在 Z 軸上平移與縮放。 |
transform-style | 子元素要不要留在同一個 3D 空間。 |
backface-visibility | 背面朝向觀察者時要不要顯示。 |
詳細用法請見 3D 變形 。
變形基準點
transform-origin 決定旋轉、縮放與傾斜時繞著哪一點進行，預設在元素正中央。基準點換了，同一個函式的結果就完全不同。
詳細用法請見 變形基準點 。
小提醒
純行內元素不接受 transform，要先把 display 改成 inline-block 或 block。
常見問題
transform 會影響周圍的元素嗎？
不會。它只改變視覺呈現，元素在文件流中仍佔著原本的位置與大小，因此旁邊的元素不會跟著位移，這也是它適合做動畫的原因。
函式的先後順序有差嗎？
有，而且差很多。變形是依序套用的，先旋轉再平移與先平移再旋轉，結果完全不同，因為座標軸會跟著一起轉，範例見 多個函式的順序。
為什麼建議用 transform 做動畫？
因為位移與縮放交由合成層處理，不會觸發重新排版與重繪，比直接改寬高或位置流暢得多，詳見 動畫的效能。
行內元素套用 transform 沒反應？
純行內元素不接受變形。把它改成 inline-block 或 block 之後就會生效。
