CSS3 transform:matrix() 旋轉與傾斜變換中 x', y' 的幾何意義解析

問題

已知 transform:matrix(a,b,c,d,tx,ty) 對應變換公式：
x' = a*x + c*y + tx
y' = b*x + d*y + ty
平移、縮放易懂，但 旋轉與傾斜下 x', y' 代表什麼？

幾何解釋

(x, y) 為元素區域座標系中的**局部座標** (通常以元素左上角為原點)。
(x', y') 為**變換後在父座標系中的座標**。

旋轉

矩陣：[cosθ, sinθ, -sinθ, cosθ, 0, 0]
公式：
x' = x·cosθ - y·sinθ
y' = x·sinθ + y·cosθ
意義：原點為中心，將點 (x,y) 逆時針旋轉 θ 角度後的新座標。
注意：CSS transform-origin 預設為 50% 50% (中心點)，實際變換為：
x' = (x - ox)·cosθ - (y - oy)·sinθ + ox
y' = (x - ox)·sinθ + (y - oy)·cosθ + oy
其中 (ox, oy) 為變換原點在元素區域中的座標。

傾斜

矩陣：[1, tan(θy), tan(θx), 1, 0, 0]
公式：
x' = x + y·tan(θx)
y' = x·tan(θy) + y
意義：沿 X 軸傾斜 θx 使 Y 座標影響 X 位移；沿 Y 軸傾斜 θy 使 X 座標影響 Y 位移。同樣以 transform-origin 為基準。

驗證技巧

在 DevTools Elements 面板勾選元素，開啟 Computed → Transform，可視化矩陣與原點，拖動滑桿觀察座標變化。

總結

x', y' 是**局部座標經變換矩陣映射到父座標系的結果座標**，旋轉/傾斜均為圍繞 transform-origin 進行的線性變換，並非單純的寬高或位移量。