CSS 變形基準點 transform-origin：決定變形的中心
transform-origin 是 CSS 中用來設定元素的變形基準點的屬性。當您對元素使用了 transform 中的旋轉、縮放、傾斜等，這個設定可以決定變形的基準點。
css
transform-origin: X軸 Y軸 Z軸 ;- X 軸: 定義水平軸上的基準點位置，可用數字與單位來表述，亦可用關鍵字來表述。
20px、50%: 自定義水平位置。left: 左緣處。center: 水平置中。right: 右緣處。
- Y 軸: 定義水平軸上的基準點位置，可用數字與單位來表述，亦可用關鍵字來表述。
20px、50%: 自定義垂直位置。top: 上緣處。center: 垂直置中。bottom: 下緣處。
- Z 軸（可選）: 定義 Z 軸上的基準點位置，通常用於 3D 變形。
基準點不同，結果完全不同
css
/* 繞中心轉（預設） */
.a { transform-origin: center; transform: rotate(45deg); }
/* 繞左上角轉，像被釘住的一角 */
.b { transform-origin: top left; transform: rotate(45deg); }
/* 從底部往上長出來 */
.c { transform-origin: bottom; transform: scaleY(0); }第三個例子常用來做下拉選單展開的動畫，搭配 轉場 就有從上方展開的效果。
小提醒
基準點只影響 旋轉、縮放與傾斜；平移是整體位移，換基準點不會有任何差別。
常見問題
預設的基準點在哪裡？
元素的正中央，也就是 50% 50%。因此預設的旋轉是繞著中心轉。
它會影響平移嗎？
不會。基準點只影響旋轉、縮放與傾斜；平移是整體位移，換基準點不會有任何差別。
第三個值什麼時候用得到？
只有 3D 變形 才用得到，它決定基準點在縱深方向的位置。這個值只能用長度，不能用百分比。
可以用關鍵字混合數值嗎？
可以，例如：水平用關鍵字、垂直用百分比。只寫一個值時，第二個值會被視為置中。
