2D轉換
IE10、Firefox、Opera 支持 transform 屬性
Chrome、Safari 需要前綴 -webkit- 。
IE9 需要前綴 -ms- 。
translate()：接收兩個參數：水平移動的距離、垂直移動的距離
transform: translate(50px, 100px);
可以分別使用 translateX() 或者 translateY() 進行單獨指定。
rotate()：接收一個參數：順時針（正數）或逆時針（負數）旋轉的角度
transform: rotate(45deg);
scale()：接收兩個參數：width 的倍數、height 的倍數
transform: scale(0.5, 0.5);
使用 scaleX() 或者 scaleY() 單獨指定。
skew()：接收兩個參數：圍繞 X 軸翻轉的角度、圍繞 Y 軸翻轉的角度
transform: skew(30deg, 30deg);
使用 skewX() 或者 skewY() 單獨指定。
如果需要同時應用多於一種轉換效果，需要使用空格，而不是逗號
transform: scale(2, 2) rotate(45deg);
transform-origin：其默認值為 transform 元素的中心點，即 50% 50% ；可以改變這個屬性的值，從而改變轉換的中心點。
比如將其 transform-origin 設置為 0 0 ，使用 scale() 轉換，能明顯看出區別。
中心點的設置是相對於元素的左上角，可以使用像素法、百分比法、關鍵字法自定義轉換的中心點。
matrix()詳解
matrix()：接收 6 個參數：a、b、c、d、e、f
其計算規則為：
其中，x 和 y 表示轉換前矩陣偏移元素中心點的坐標；x' = ax + cy + e 和 y' = bx + dy + f 分別表示轉換后的坐標。
中心點的坐標固定為(0, 0)，這個值與 transform-origin 的值無關；也就是說，即使 transform-origin 的值從默認的 50% 50% 被指定為 （假設）30px 30px ，其意為坐標 (0, 0) 從 50% 50% 的位置移動到 30px 30px 的位置； 30px 30px 這個點是新的中心點，其坐標為 (0, 0) 。
假設 matrix(1,0,0,1,30,30) ;
那么 x' 和 y' 分別等於 x + 30 和 y +30 ；
也就是說，經過矩陣轉換之后，(0, 0) 變成 (30, 30) ，(1, 1) 變成 (31, 31) ，以此類推。。。直到轉換元素所有的坐標都經過變化之后，在新的位置上組成了一個新的圖形。
其結果與 translate(30px, 30px) 完全相同。
總結
位移：
matrix(1, 0, 0, 1, tx, ty) === translate(tx + "px", ty + "px")
x' = x + tx
y' = y + ty
縮放：
matrix(sx, 0, 0, sy, 0, 0) === scale(sx, sy)
x' = sx * x
y' = sy * y
旋轉：
matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0) === rotate(θ + "deg")
順序為 CS - SC ；
x' = x * cosθ - y * sinθ
y' = x * sinθ + y * cosθ
需要傳入具體的 cos 或者 sin 值。
斜切：
matrix(1, tan(θy), tan(θx), 1, 0, 0) === skew(θx + "deg", θy + "deg")
x' = x * tan(θx)
y' = y * tan(θy)
參考：