只要有CSS基礎的人肯定都知道，我們可以通過transform中的translate,scale,rotate,skew這些方法來控制元素的平移，縮放，旋轉，斜切，其實這些方法呢都是為了便於開發者使用的一個函數；可能大家有時候在用的時候也會有困惑，它們能夠改變元素運動，這其中的本質是什么呢？今天我們就來說一說transform: matri()這個東西，如果是2D變換，括號里就是6個值得矩陣，如果是3D變換，括號里就是4*4的16值得矩陣，今天我們就先來看看這個2D變換改變參數達到元素變換的原理。
首先帶大家來了解一個概念（實在不喜歡看文字的可以略過這段）
[ 首先我們來說一說何為矩陣，這就要先來扯一扯線性代數的知識了，其實任何一種運動都是在一個特定的空間里進行的，這個空間有它自己特定的運動變換規則，我們的線性空間就屬於空間中的一種，線性空間中的運動我們就稱之為線性變換，在線性空間里，我們要把一個點運動到任意的另一個點，都可以用線性變換來表示，如何表示呢？當我們在這個線性空間里選擇了一個基(所謂基就是能夠用來表示空間中所有對象的向量組)，那么我們就可以用向量來描述空間中的任何一個對象，然后用矩陣來描述空間中的變換。而使某個對象發生運動的方法就是用代表運動的矩陣乘以代表對象的那個向量。也就是說，在線性空間選定基之后，++向量刻畫對象，矩陣刻畫對象的運動，用矩陣與向量的乘法施加運動++。]
- 好了，我們要開始講重點嘍
平移
在CSS3中我們矩陣的原始值是這樣的：
transform: matrix(1,0,0,1,0,0);
寫成我們數學里矩陣的形式是這樣的
這么看起來，我們不太好分辨哪個數字對應的是我們上面寫的matrix值里的哪一個，那為了便於描述我們把它寫成：
transform: matrix(a,b,c,d,e,f);
那么寫成數學矩陣式就是這樣的：
根據我們上面說的用矩陣與向量的乘法來施加運動，我們就可以來看一下它到底是怎么運動起來的
（怎么算的？線性代數忘光光的同學看這里，其實只要把前面橫着的a,c,e與后面豎着的x,y,1相乘再相加就ok了）
這么一來我們可以得到一個式子就是：
x'=ax+cy+e
y'=bx+dy+f
x'和y'就是我們變換后的水平位置坐標和垂直位置坐標，現在我們想要把元素往x軸的正方向平移10，在y軸方向上不動,反映到方程式里，我們要怎么來實現呢
元素往x軸的正方形平移10，在y軸方向上不動，反映到方程式里：
x'=ax+cy+e ---（x'=ax+cy+e+10)
y'=bx+dy+f （不變）
元素往y軸的正方向平移10，在x軸方向上不動，反映到方程式里：
x'=ax+cy+e （不變）
y'=bx+dy+f ---（y'=bx+dy+f+10）
元素同時往x軸正向和y軸正向移動10個單位 ：
我們用css矩陣來寫：transform： matrix（1,0,0,1,10,10）--其他數值都不動，e和f分別加10
結論：平移只有跟e和f有關系，跟其他a,b,c,d沒有關系，它們該怎么樣還是怎么樣，e對應x軸的平移，f對應y軸的平移，往正方向平移多少單位就加上多少單位，反之則減去多少個單位。
縮放
平移就是x或者y加減一個常數來得到的，理解了平移之后縮放就很簡單了，可不就是x和y的倍數發生了變化么，反映到式子上來那就是系數的變化，那同樣道理我們把上面的式子拿過來
x放大2倍 y不變
x'=ax+cy+e---（x'=2ax+cy+e) 就是x的系數增大2倍
y'=bx+dy+f (不變)
y放大2倍 x不變
x'=ax+cy+e (不變)
y'=bx+dy+f---(y'=bx+2dy+f) 就是y的系數增大2倍
x和y都放大2倍，就是x和y的系數都增大2倍
寫成矩陣就是：
transform：matrix（2,0,0,2,0,0)
結論：縮放只有跟a和d有關系，跟其他數值都無關，a對應x軸縮放，d對應y軸縮放，縮放多少倍就乘以多少
旋轉
相比於平移和縮放，旋轉相對來說要復雜點了，當然搞清楚了就沒什么難的了
請看
transform：matrix（cosθ，sinθ,-sinθ,cosθ,0,0);
請看實例：
現在我們要讓這個元素往順時針方向旋轉45°（sin45°=0.707，cos45°=0.707），那么我們給div加樣式如下：
transform: matrix(0.707,0.707,-0.707,0.707,0,0);
看下我們div現在的樣子
這個div是不是就按我們預期的一樣往順時針方向轉了45°了；
接下來我們把這個旋轉放到數學里來看下
那同樣的我們把它寫成數學里矩陣的形式：
同樣的根據矩陣的計算公式，我們可以得到公式：
x'=xcosθ-ysinθ;
y'=xsinθ+ycosθ
現在我們先把公式放在這里，我們來看一下下圖的這個正方形，從圖中我們可以知道a,b,c,d的坐標分別為：
A(0,1) B(1,1) C(1,0) D(0,0)
當我們讓它旋轉90°之后，那此時的cos45°就是0 sin45°都為1，分別把A,B,C,D里的x,y代入上面的公式之后我們可以得到：
A'(0.707,0.707) B'(1.414,0) C'(0.707,-0.707) D'(0,0)
現在這個正方形就變成了下圖的樣子，和我們寫代碼達到的效果是一樣的：
結論：我們要記住初始寫法是這樣的
transform：matrix（cosθ，sinθ,-sinθ,cosθ,0,0);然后需要旋轉多少度就計算出這個度數的cosθ，sinθ就可以達到我們想要的效果啦