關鍵詞：matrix
css最為人稱道的優(yōu)點之一就是增加了transform功能，用它來配黑transition可是不用js就能夠實現(xiàn)優(yōu)美的動畫效果，css3提供了四種變換方法位移，縮放，旋轉，斜切
簡單演示下效果：
* <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); /* 旋轉 */
transform:translate(10px, 20px); /* 位移 */
}
那這些方法是怎么實現(xiàn)的呢,其實都是通過矩陣的方式做出來的，
matrix功能實現(xiàn)
一提到矩陣是不是聯(lián)想到線性代數(shù)啦，突然間好方( ⊙ o ⊙ )?。?br>
其實并不難，用到的都是簡單的矩陣
旋轉、壓縮、斜切等，本質上都是應用的matrix()方法實現(xiàn)的（修改matrix()方法固定幾個值），只是類似于transform:rotate這種表現(xiàn)形式，我們更容易理解，記憶與上手。
寫法是這樣的
* transform: matrix(a,b,c,d,e,f);
六個參數(shù)對應的矩陣：
矩陣
其變化的方法：
變換公式
什么意思呢?
- ax+cy+e表示變換后的水平坐標，
- 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坐標 : ax+cy+e = 10+00+30 =30,
- y坐標 : bx+dy+f = 00+10+30 =30.
縮放(scale)
* transform: matrix(3, 0, 0, 0.5, 0, 0);
其實就是這樣一個公式
*比例是 s，則有matrix(s, 0, 0, s, 0, 0);第一個s代表x軸，第二個s代表y軸。
- x' = ax+cy+e = sx+0y+0 = s*x;
- y' = bx+dy+f = 0x+sy+0 = s*y;
旋轉(rotate)
* transform: matrix(0.866025,0.500000,-0.500000,0.866025,0,0); // 旋轉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上上傳了幾個小demo，可以對matrix矩陣進行轉換:
- [旋轉變換][]
[旋轉變換]: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矩陣，可以實現(xiàn)IE下的兼容，而且還可以做出很多特別炫的效果，大家多多嘗試，共勉！！
