關(guān)鍵詞：matrix
css最為人稱(chēng)道的優(yōu)點(diǎn)之一就是增加了transform功能，用它來(lái)配黑transition可是不用js就能夠?qū)崿F(xiàn)優(yōu)美的動(dòng)畫(huà)效果，css3提供了四種變換方法位移，縮放，旋轉(zhuǎn)，斜切
簡(jiǎn)單演示下效果：
* <div class="box"></div>
/* CSS代碼 */
.box{
width: 100px;
height: 100px;
box-sizing: content-box;
background-color: #eee;
border:1px solid #ccc;
transition: 1s;
}
.box:hover{
transform: skew(35deg); /* 斜切 */
transform:scale(1, 0.5); /* 縮放 */
transform:rotate(45deg); /* 旋轉(zhuǎn) */
transform:translate(10px, 20px); /* 位移 */
}
那這些方法是怎么實(shí)現(xiàn)的呢,其實(shí)都是通過(guò)矩陣的方式做出來(lái)的，
一提到矩陣是不是聯(lián)想到線性代數(shù)啦呛牲，突然間好方( ⊙ o ⊙ )啊驮配！
其實(shí)并不難娘扩，用到的都是簡(jiǎn)單的矩陣
旋轉(zhuǎn)、壓縮壮锻、斜切等琐旁，本質(zhì)上都是應(yīng)用的matrix()方法實(shí)現(xiàn)的（修改matrix()方法固定幾個(gè)值），只是類(lèi)似于transform:rotate這種表現(xiàn)形式猜绣，我們更容易理解灰殴，記憶與上手。
寫(xiě)法是這樣的
* transform: matrix(a,b,c,d,e,f);
六個(gè)參數(shù)對(duì)應(yīng)的矩陣：
其變化的方法：
什么意思呢?
- ax+cy+e表示變換后的水平坐標(biāo)掰邢，
- bx+dy+f 表示變換后的垂直位置牺陶。
位移（displace）
* transform: matrix(1, 0, 0, 1, 100, 100); /* a=1, b=0, c=0, d=1, e=100, f=100 */
變換后：
- x坐標(biāo) : ax+cy+e = 10+00+30 =30,
- y坐標(biāo) : bx+dy+f = 00+10+30 =30.
縮放(scale)
* transform: matrix(3, 0, 0, 0.5, 0, 0);
其實(shí)就是這樣一個(gè)公式
*比例是 s伟阔，則有matrix(s, 0, 0, s, 0, 0);第一個(gè)s代表x軸，第二個(gè)s代表y軸掰伸。
- x' = ax+cy+e = sx+0y+0 = s*x;
- y' = bx+dy+f = 0x+sy+0 = s*y;
旋轉(zhuǎn)(rotate)
* transform: matrix(0.866025,0.500000,-0.500000,0.866025,0,0); // 旋轉(zhuǎn)30度
- matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
- x' = xcosθ-ysinθ+0 = xcosθ-ysinθ
- y' = xsinθ+ycosθ+0 = xsinθ+ycosθ
拉伸(skew)
* transform: matrix(1,0,0.75,1,0,0);
- matrix(1,tan(θy),tan(θx),1,0,0)
- x' = x+ytan(θx)+0 = x+ytan(θx)
- y' = xtan(θy)+y+0 = xtan(θy)+y
我在github上上傳了幾個(gè)小demo皱炉，可以對(duì)matrix矩陣進(jìn)行轉(zhuǎn)換:
- [旋轉(zhuǎn)變換][]
[旋轉(zhuǎn)變換]:http://htmlpreview.github.io/?https://github.com/ferrinte/matrix/blob/master/matrix%E8%BD%AC%E6%8D%A2%E5%99%A8/%E6%97%8B%E8%BD%AC.html - [斜切變換][]
[斜切變換]:http://htmlpreview.github.io/?https://github.com/ferrinte/matrix/blob/master/matrix%E8%BD%AC%E6%8D%A2%E5%99%A8/%E6%96%9C%E5%88%87.html - [縮放變換][]
[縮放變換]:http://htmlpreview.github.io/?https://github.com/ferrinte/matrix/blob/master/matrix%E8%BD%AC%E6%8D%A2%E5%99%A8/%E7%BC%A9%E6%94%BE.html
利用matrix矩陣，可以實(shí)現(xiàn)IE下的兼容狮鸭，而且還可以做出很多特別炫的效果合搅，大家多多嘗試，共勉Ｆ缃丁历筝！
