关键词：matrix
css最为人称道的优点之一就是增加了transform功能，用它来配黑transition可是不用js就能够实现优美的动画效果，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); /* 位移 */
}
那这些方法是怎么实现的呢,其实都是通过矩阵的方式做出来的，
matrix功能实现
一提到矩阵是不是联想到线性代数啦，突然间好方( ⊙ o ⊙ )啊！
其实并不难，用到的都是简单的矩阵
旋转、压缩、斜切等，本质上都是应用的matrix()方法实现的（修改matrix()方法固定几个值），只是类似于transform:rotate这种表现形式，我们更容易理解，记忆与上手。
写法是这样的
* transform: matrix(a,b,c,d,e,f);
六个参数对应的矩阵：
矩阵
其变化的方法：
变换公式
什么意思呢?
- 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矩阵，可以实现IE下的兼容，而且还可以做出很多特别炫的效果，大家多多尝试，共勉！！
