CSS Transform - 變形基準點

transform-origin 是 CSS 中用來設定元素的變形基準點的屬性。當您對元素使用了 transform 中的旋轉、縮放、傾斜等，這個設定可以決定變形的基準點。

transform-origin: X軸 Y軸 Z軸 ;

• X 軸: 定義水平軸上的基準點位置，可用數字與單位來表述，亦可用關鍵字來表述。
  • 20px、50%: 自定義水平位置。
  • left: 左緣處。
  • center: 水平置中。
  • right: 右緣處。
• Y 軸: 定義水平軸上的基準點位置，可用數字與單位來表述，亦可用關鍵字來表述。
  • 20px、50%: 自定義垂直位置。
  • top: 上緣處。
  • center: 垂直置中。
  • bottom: 下緣處。
• Z 軸（可選）: 定義 Z 軸上的基準點位置，通常用於 3D 變形。