Css中的transform是我們在進行動畫效果製作和圖形變化常用的屬性，transform中的scale支援縮放，translate支援位移，rotate支援旋轉……

但是為了方便使用，有這麼一個屬性，其中有6個引數，可以同時進行旋轉，位移，縮放和傾斜。

Matrix初始值為

transform： matrix（1，0，0，1，0，0）；

轉換為數學中的矩陣為

1 0 0

0 1 0

0 0 1

可以這麼理解：

Transform： matrix（a，b，c，d，e，f）；

a c e

b d f

0 0 1

數學的矩陣中多出來的最後3個預設為001，我們只需要操作前6個即可

平移：

那麼如何透過這個屬性來平移？

即修改引數e和引數f來實現，e對應x軸，f對應y軸；

這裡建立的div預設在html的左上角

我們透過修改matrix的引數來實現位移：

我們修改了e和f所對應的值

圖形x軸和y軸都位移了100px

效果和如下圖程式碼相同：

縮放：

縮放只需要修改a和d的值，a對應縮放x軸，d對應縮放y軸

修改的數值即為原來的n倍

x軸不變，y軸放大到原來的兩倍

旋轉：

旋轉要稍微複雜一點，預設的角度所對應的：

transform： matrix（cos 0，sin0，-sin0，cos0，0，0）；

我們想要將這個元素順時針旋轉45度，只要算出對應的cos45，sin45即可

Sin45=0。707，cos45 = 0。707；

效果如下：