跳轉到

建立 2025-02-25 更新 2026-09-11

變形（Transform）

transform 在繪製前移動、縮放、旋轉元素，不改變它在文件流裡佔的空間（鄰居不會被推開）。很適合 hover 微互動，也常搭配過渡。

常用函數

函數 作用 例子
translate(x, y) 平移 translate(0, -4px)
translateX / Y / Z 單軸 translateY(-50%)
rotate(angle) 2D 旋轉 rotate(-8deg)
rotateX / Y / Z 3D 旋轉 rotateY(180deg)
scale(s) 縮放 scale(1.05)
skew(x, y) 傾斜 skewX(-8deg) 
.card:hover {
  transform: translateY(-4px) scale(1.02);
}

後面的 transform 會整份取代前面

一個元素上寫兩次 transform，只留最後一次。要組合請寫在同一串裡。

百分比的 translate 是相對自己的寬高，所以垂直置中經典寫法是：

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

（Flex 置中通常更好寫。）

transform-origin

旋轉與縮放的錨點，預設是中心 50% 50%。

.door {
  transform-origin: left center;
}
.door:hover { transform: perspective(800px) rotateY(-25deg); }

可用關鍵字 top left 或 0 100%。

一點 3D

.scene { perspective: 800px; }
.card-3d { transform-style: preserve-3d; }
.card-3d:hover { transform: rotateY(180deg); }

perspective 設在父層較常見。3D 翻牌還要處理正反面 backface-visibility: hidden。

matrix() 與順序

matrix(a, b, c, d, tx, ty) 能表達 2D 仿射變換，但幾乎不可讀，除錯請用獨立函數。

寫在右邊的函數先套用（與數學矩陣相乘順序相同）。translate 再 rotate 與相反順序，路徑會不一樣。不確定時在開發者工具裡調。

效能

瀏覽器對 transform 與 opacity 的動畫通常能走合成層，比動畫 top / left / width 順。需要提示瀏覽器時：

.fab { will-change: transform; }

動畫結束應移除 will-change，避免佔用記憶體。

總結

  • 變形不佔局；要推開鄰居請改 margin 或 Flex。
  • 多個效果寫在同一個 transform。
  • 互動動畫優先變形 translate / scale，再交給 過渡。