對CSS3中的transform：Matrix（）矩陣的一些理解

只要有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θ就能夠達到咱們想要的效果啦