transform: rotate | scale | skew | translate |matrix;

matrix（矩陣）

根據矩陣參數，對元素（圖形）進行變換

先上兩個沒有基礎不太容易看懂的圖，就算不理解也沒關系，下面有比較通俗的案例可以查看效果。

• 3x3 的變換矩陣

• 對二維向量進行轉換

其中 x1、y1 為經過 Matrix 轉換后的向量。

如果沒有看懂也不要緊，可以自己在項目中試試下面這段代碼，根據效果來理解。

#box {
    width: 300px;
    height: 300px;
    background: #dd6100;
    margin: 100px auto 0;
    // 請大家對下面 matrix 的 6 個參數進行增減試試效果
    transform: matrix(1, 0, 0, 1, 0, 0);
}
<div id="box"></div>

由效果得知，在 Matrix 中：

• e,f 主要用于設置元素在 X 軸和 Y 軸上的平移。
• a,d 主要用于設置元素在 X 軸和 Y 軸上的縮放。
• b,c 主要用于設置元素扭曲。
• a,b,c,d 可以共同作用，用于設置元素在 XY 平面上的旋轉。

注意：rotate/translate/screw 等都可以直接通過設置 Matrix 來達到同樣的效果，它們都不過是將 Matrix 能夠實現的效果進行單獨封裝，方便你使用而已。

translate（平移）

設置元素在 X 軸或者 Y 軸上的平移

#元素沿著 X軸正方向平移 15px，沿著 Y軸正方向平移 25px
translate(100px, 20px)
#效果相同
Matrix(1, 0, 0, 1, 100, 20) 

scale（縮放）

設置元素在 X 軸或者 Y 軸上進行縮放

• 一個參數：圖形被縮放多少倍，如：scale(2)
• 兩個參數 (x,y)，如：scale(2,2)

# 元素在 X 軸上拉伸為 2 倍，在 Y 軸上縮小位 0.5 倍
scale(2, 0.5)
# 效果相同
Matrix(2, 0, 0, 0.5, 0, 0)

注意：scale 的參數為負數時，元素在對應的方向上進行反轉

scaleX 和 scaleY

在 x 軸和 y 軸對元素分別進行縮放

• 圖形在 x 軸被縮放多少倍，如 scaleX(2)
  
• 在 y 軸被縮放多少倍，如 scaleY(2)
  

rotate、rotateZ（旋轉）

二維空間中，圍繞順時針方向旋轉

#圍繞屏幕法向量順時針旋轉 30度
rotate(30deg) 
#效果相同 Sin(30) ≈ 0.866
Matrix(0.866, 0.5, -0.5, 0.866, 0, 0) 

transform-origin（旋轉原點）

transform 變換原點，只對設置了rotate 的元素有效

rotate(30deg);
// 將元素以左上角點為中心進行旋轉
transform-origin: 'left top';

設置 transform-origin 為元素坐上點后，元素圍繞左上角旋轉

skew

設置 X 方向和 Y 方向的傾斜角度，將元素扭曲

transform:skew(30deg,10deg):

transform 多屬性值渲染

transform: translateX(100px) rotate(90deg);