前言
其實(shí)無(wú)論哪一門(mén)技術(shù)的發(fā)展都有其根源可揪，我之前做了一些css3動(dòng)畫(huà)的效果钠怯，對(duì)css3流暢而又實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫(huà)效果深深著迷，遂決定探究下css3動(dòng)畫(huà)的來(lái)世今生，
本文如有疏漏婴削，請(qǐng)各位看官及時(shí)指出，以防誤導(dǎo)更多學(xué)習(xí)的童鞋牙肝，隨著本文的深入唉俗，對(duì)看官的數(shù)學(xué)功底有一定的要求。
(更多原創(chuàng)請(qǐng)關(guān)注 小米前端博客 www.0313.name）
IE時(shí)代的Matrix濾鏡
在ie瀏覽器大行其道的時(shí)候如果我們想實(shí)現(xiàn)元素的旋轉(zhuǎn)與拉伸功能配椭，那么就可以使用Matrix濾鏡虫溜，他是大概長(zhǎng)得這個(gè)模樣：
filter: progid:DXImageTransform.Microsoft.Matrix( SizingMethod= sMethod , M11= fM11 , M12= fM12 , M21= fM21 , M22= fM22 )
先不管這個(gè)東西怎么用，但是這個(gè)應(yīng)該是當(dāng)時(shí)瀏覽器實(shí)現(xiàn)元素動(dòng)畫(huà)比較先進(jìn)的方法了股缸，那么我猜想衡楞，css3中加入的動(dòng)畫(huà)方法應(yīng)該是借鑒了ie濾鏡的實(shí)現(xiàn)，進(jìn)一步完善和封裝而成乓序。
了解css3動(dòng)畫(huà)之方法
css3為我們提供了2大屬性
Transform和animation（這個(gè)屬性我會(huì)在另外一篇文章專門(mén)探究）
下面我們來(lái)看 Transform 的幾個(gè)方法
其中Transform 屬性主要為元素的各種變化提供了這么幾個(gè)方法
移動(dòng) translate
比如我要操作一個(gè)dom位移寺酪，可以這樣做：
transform:translate(30px,30px)
它表示水平方向和垂直方向同時(shí)移動(dòng)30像素，當(dāng)然你也可以只移動(dòng)水平方向（x軸）替劈，或者垂直方向（y軸）寄雀，移動(dòng)的距離是相對(duì)于原來(lái)的位置，
注意陨献，位移操作是整個(gè)css動(dòng)畫(huà)里面比較特殊的一種盒犹，看似簡(jiǎn)單，其實(shí)實(shí)現(xiàn)它可是很費(fèi)勁的哦··后面會(huì)講到
縮放 scale
對(duì)一個(gè)元素縮小一倍眨业，可以這樣做：
transform:scale(0.5)
當(dāng)然你也可以放大急膀，填入的數(shù)字大于1即可
旋轉(zhuǎn) rotate
比如我要對(duì)一個(gè)dom元素進(jìn)行旋轉(zhuǎn)操作，可以這樣做
transform:rotate(90deg)
它表示繞元素中心順時(shí)針旋轉(zhuǎn)了90度龄捡，聰明的同學(xué)可能會(huì)問(wèn)卓嫂，我能不能繞指定的某一點(diǎn)去旋轉(zhuǎn)來(lái)實(shí)現(xiàn)更多效果？當(dāng)然可以聘殖，會(huì)用到transform-origin 指定圓心位置
扭曲 skew
對(duì)一個(gè)元素進(jìn)行扭曲晨雳，可以這樣做：
transform:skew(30deg行瑞，30deg)
它表示同時(shí)在水平方向(x軸)和并在垂直方向(y軸)進(jìn)行扭曲變行,好吧，我知道你沒(méi)聽(tīng)明白我說(shuō)的是啥餐禁，來(lái)個(gè)圖：
矩陣變形 matrix
看到矩陣這個(gè)詞有沒(méi)有感覺(jué)到高端大氣上檔次血久，低調(diào)奢華顯內(nèi)涵？
沒(méi)錯(cuò)帮非，90%的前端程序員只會(huì)用前面幾個(gè)方法氧吐，對(duì)于矩陣的使用還是很陌生
首先來(lái)看一下前面幾個(gè)方法用矩陣實(shí)現(xiàn)的方法
#位移變換：
transform: translate(30px,30px);
transform: matrix(1, 0, 0, 1, 30, 30);
#縮放變換：
transform: scale(0.5);
transform: matrix(0.5, 0, 0, 0.5, 0, 0);
#旋轉(zhuǎn)變換
transform: rotate(45deg);
transform: matrix(0.53, 0.85, -0.85, 0.53, 0, 0);//matrix(cos45',sin45',-sin45',cos45',0,0);
#扭曲變換
transform: skew(45deg);
transform: matrix(1,0,1,1,0,0);//tan45'=1;matrix(1,tan45',tan45',1,0,0)
看到前2個(gè)感覺(jué)還是很良好的吧，后2個(gè)方法是不是數(shù)學(xué)尷尬癥又犯了末盔？
總結(jié)起來(lái)筑舅，矩陣 matrix方法一共有6個(gè)參數(shù) matrix(a, b, c, d, e, f);四個(gè)基本的變換方法都是由矩陣方法提煉而來(lái)；
** 來(lái)一個(gè)只有矩陣才能實(shí)現(xiàn)的對(duì)稱變換 **
(圖來(lái)自 [張?chǎng)涡竦牟┛蚞)
軸圍繞的那個(gè)點(diǎn)就是CSS3中transform變換的中心點(diǎn)陨舱，自然豁翎，鏡像對(duì)稱也不例外。因?yàn)樵撦S永遠(yuǎn)經(jīng)過(guò)原點(diǎn)隅忿，因此，任意對(duì)稱軸都可以用y = k * x表示邦尊。則matrix表示就是：
有了公式可以直接求解了背桐，高中的數(shù)學(xué)知識(shí)就可以求出對(duì)稱的坐標(biāo)，不過(guò)隨后我告訴你一種更高級(jí)的方法
深入css3動(dòng)畫(huà)之實(shí)現(xiàn)
好了蝉揍，進(jìn)行到這里链峭，你已經(jīng)是10%中的優(yōu)秀前端開(kāi)發(fā)童鞋了，你盡可以在跟面試官對(duì)噴的時(shí)候放出矩陣大法又沾，頓時(shí)會(huì)讓你顯得高端大氣上檔次弊仪，低調(diào)奢華顯內(nèi)涵（裝b的感覺(jué)）;
說(shuō)白了，你還是什么都不懂杖刷，你充其量只是會(huì)用罷了励饵，我問(wèn)你幾個(gè)問(wèn)題來(lái)暴漏下你的無(wú)知：
你知道為什么IE的Matrix濾鏡方法不可以實(shí)現(xiàn)位移嗎？
你知道為什么css3的矩陣matrix會(huì)有6個(gè)參數(shù)滑燃？
你知道為什么我說(shuō)css3的位移方法比較特殊嗎役听？
你知道為什么不同的css3變換方法會(huì)對(duì)應(yīng)矩陣matrix不同的參數(shù)？是怎么算出來(lái)的嗎表窘？
你知道····為什么嗎典予？
如果你想進(jìn)一步成為1%的尖端前端人才，跟著我接著往下看（看懂了才算～～）
知識(shí)準(zhǔn)備
矩陣的乘積
1x2維矩陣和2x2維矩陣的乘法
同理乐严，2x2的矩陣的乘積公式是這樣的瘤袖，第一個(gè)矩陣第一行的x1和y1分別乘以第二個(gè)矩陣的第一列的a和c，然后其他位置參照例子可以得出昂验；
為什么要這么算捂敌？我建議你去翻一下線性代數(shù)的第一章有詳細(xì)的介紹艾扮，或是參考 阮一峰老師的對(duì)矩陣乘法的理解；
其中黍匾，（x1栏渺，y1）和（x2，y2）你可以看作是兩個(gè)點(diǎn)坐標(biāo)
在這里锐涯，我們稱 第二個(gè)矩陣為 變換矩陣
幾何向量
在數(shù)學(xué)中磕诊，幾何向量，指具有大形齐纭（magnitude）和方向的量霎终。向量可以形象化地表示為帶箭頭的線段。箭頭所指：代表向量的方向升薯；線段長(zhǎng)度：代表向量的大小莱褒。
給空間設(shè)一直角坐標(biāo)系,也能把向量以數(shù)對(duì)形式表示,例如Oxy平面中(3,2)是一向量.
在這里，我們稱矩陣中的一對(duì)數(shù)字(a,b)或者(c,d)為 變換向量
通過(guò)矩陣求解縮放涎劈、扭曲
假設(shè)一個(gè)方形ABCD广凸，四個(gè)點(diǎn)的坐標(biāo)分別為[(0,0),(2,0),(2,2),(0,2)],我要求寬放大1.5倍，高放大2倍蛛枚，放大后的的方形(ABCD)'是這個(gè)樣子：
那么為了得到這個(gè)變化后的方形(ABCD)'谅海，我們直接給出變換矩陣：
看一下變換矩陣[(1.5,0),(0,2)],從字面理解一下，第一對(duì)數(shù)字（1.5,0）蹦浦，你可以理解為我沿著x軸將寬度延長(zhǎng)了1.5倍扭吁，因?yàn)榈诙€(gè)參數(shù)是0嘛，y坐標(biāo)是0盲镶，所以是沿著x軸侥袜，
那么(0,2)，道理一樣溉贿，就是沿著y軸將高度延長(zhǎng)了2倍枫吧，那么這2對(duì)數(shù)字(1.5,0)和(0,2)為 變換向量。
從嚴(yán)謹(jǐn)?shù)臄?shù)學(xué)角度來(lái)說(shuō)顽照，他們變換后的坐標(biāo)是通過(guò)矩陣乘積得到的由蘑，矩陣乘積方法已經(jīng)在知識(shí)準(zhǔn)備中有交代了;
好 那么接下來(lái) 說(shuō)一說(shuō)扭曲，剛才講了縮放是分別長(zhǎng)寬沿著x軸和y軸延長(zhǎng)代兵，圖形的基本形狀沒(méi)有變尼酿，還是直角，下面植影，我想讓這個(gè)寬不再沿著x軸啦裳擎，沿著一個(gè)有角度的變換向量(1,1)來(lái)變換:
來(lái)看下變換后的坐標(biāo):
變換后的圖形的樣子:
y軸的變換向量為（0，1）思币，你可以理解為縮放大小不變鹿响，同時(shí)沒(méi)有扭曲羡微，聰明你的是否立馬能想到如何讓高度也扭曲了嗎？那么那你也一定知道如何讓它同時(shí)縮放又扭曲
回頭看一下方法：
#扭曲變換
transform: skew(45deg);
transform: matrix(1,0,1,1,0,0);//matrix(a,b,c,d,0,0)惶我，請(qǐng)按照矩陣圖一一對(duì)應(yīng)下
所以transform: skew(45deg) 方法我們傳入的是變換向量的角度值妈倔，如果用matrix方法來(lái)表示的話需要把角度值換算成三角的對(duì)邊和臨邊的具體值；
那么縮放跟扭曲是否有一種豁然開(kāi)朗的感覺(jué)绸贡？
通過(guò)矩陣求解旋轉(zhuǎn)
先給出變換矩陣
比如一個(gè)點(diǎn) (2,2),旋轉(zhuǎn)30度盯蝴，那么旋轉(zhuǎn)后的坐標(biāo)由下式得出：
來(lái)看下最終的方程式：
具體推導(dǎo)過(guò)程不再這里說(shuō)了，要不然我怕童鞋們一下接受不了吐掉听怕，這里給出一個(gè)地址感興趣可以看下 坐標(biāo)旋轉(zhuǎn)推導(dǎo)過(guò)程
通過(guò)矩陣求解位移
終于說(shuō)到這個(gè)位移了捧挺，首先我們理解下位移的實(shí)現(xiàn)，比如一個(gè)點(diǎn)（x尿瞭，y）,要求分別x方向移動(dòng)l個(gè)單位闽烙，y
方向移動(dòng)m個(gè)單位,這個(gè)比較簡(jiǎn)單，x坐標(biāo)和y坐標(biāo)分別加l和m即可声搁，新的坐標(biāo)：
x`=x+l;
y`=y+m;
那么通過(guò)矩陣乘積如何得到這個(gè)公式呢黑竞？好啦，我知道這個(gè)對(duì)于一個(gè)數(shù)學(xué)恐懼癥患者來(lái)說(shuō)太難了疏旨，我直接給出答案：
這就是我賣了半天官子所要表達(dá)的意思摊溶，位移之所以特殊，為了能夠使用矩陣乘積得出位移方程解我們是需要將 變換矩陣 改成 2x3維矩陣
在此充石，將[x y 1]稱為平面坐標(biāo)點(diǎn)[x y]的齊次坐標(biāo)表示法，至于為什么要這么做呢霞玄？來(lái)博主再給你好好講下(觀眾：博主你真不能再深挖了骤铃，老衲快受不了了···)
順帶解釋下為什么ie的Matrix濾鏡方法不能實(shí)現(xiàn)位移，因?yàn)樗皇且粋€(gè)2x2的矩陣坷剧，你仔細(xì)數(shù)一下它后面需要傳入的參數(shù)就知道啦
總結(jié)一下
事實(shí)上惰爬，在圖形變幻中，往往需要一些比基本變換更復(fù)雜的變換惫企，我們稱由多個(gè)二維基本變換組成的復(fù)雜變換為二維組合變換
上面這句話我需要解釋下撕瞧，否則你會(huì)不太理解，比如狞尔，我想將一個(gè)正方形變成一個(gè)圓形丛版，這變不了，因?yàn)椴豢赡芡ㄟ^(guò)幾種基本變換來(lái)達(dá)到偏序，所以是有局限性的页畦；
另外還有幾種 基本變換 需要介紹下
第一種：圖形相對(duì)于y軸的對(duì)稱變化，變化矩陣為：
第二種：圖形相對(duì)于x軸的對(duì)稱變化研儒，變化矩陣為：
全文高潮部分(復(fù)雜變換求解)
事實(shí)上豫缨，前面鋪墊了那么多我只是為了這一部分独令，通過(guò)前面幾節(jié)的介紹，我想童鞋們都已經(jīng) ·比較· 深刻的理解css3動(dòng)畫(huà)幾個(gè) 基本變換 實(shí)現(xiàn)方式好芭；
事實(shí)上也是基本理解燃箭，其實(shí)你還是不理解···
我來(lái)說(shuō)出一下你心中的疑惑，比如位移求解方程明明簡(jiǎn)單的要死為什么非要用矩陣方式得出舍败？這不是脫了褲子放屁（多此一舉）
已經(jīng)證明：任何二維組合變換均可分解為多個(gè)基本變換的乘積
只有把基本變換求解統(tǒng)一成矩陣求解招狸，那么我們才能夠去求解更加復(fù)雜的二維組合變換
這里我們拋磚引玉，來(lái)求解下上面提到的 相對(duì)于y=kx的圖形的對(duì)稱變換瓤湘，簡(jiǎn)單一點(diǎn)瓢颅，假設(shè)k=1，那么就是y=x：
首先分解成基本變換：
首先讓它逆時(shí)針旋轉(zhuǎn) 45度弛说，將對(duì)稱方程變?yōu)?y=0挽懦，也就是求出對(duì)y軸的對(duì)稱變換，然后呢木人，再轉(zhuǎn)回去信柿，來(lái)看一下最終的變換方程：
其實(shí)不難看出，后面三個(gè)變換矩陣相乘結(jié)果為:
所以醒第，你也可以將y=x對(duì)稱變換也可以看作是基本變換渔嚷，推導(dǎo)過(guò)程就是我們上面的求解過(guò)程；
在將要結(jié)束的時(shí)候稠曼，我希望有同學(xué)能夠通過(guò)這篇文章的學(xué)習(xí)形病，推導(dǎo)出 y=kx對(duì)稱變換的求解過(guò)程，方法已經(jīng)講的很明白了···給我留言吧霞幅！
觀后思考
如何求解對(duì)于一條任意直線的 Ax+By+C=0的對(duì)稱變換漠吻？說(shuō)一下他的求解變換過(guò)程把！
