css3 transform属性及其二维变换矩阵

transform属性实现了一些可用SVG（可缩放矢量图形）实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素，并且该元素 下的所有子元素 随着参数的设置 旋转、缩放 和移动。

(1) rotate (旋转)，1个参数，参数是度数。允许你通过传递一个度数值来转动一个对象；其值可取正、负。正值代表顺时针旋转,负值代表逆时针旋转。例如：rotate(20deg) 顺时针旋转20度。

rotateX(旋转),1个参数，参数是度数。沿X轴旋转。rotateY(旋转),1个参数，参数是度数。沿X轴旋转。

　　div { transform: rotate(30deg); }　　 //顺时针旋转30度

　　div { transform:rotateY(30deg); } //沿Y轴旋转30度

(2) scale (缩放)，1或2个参数，参数是自然数数值（可以为正、负、小数）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值。参数的含义:绝对值大于1，代表放大；绝对值小于1,代表缩小。当值为负数时,对象反转。

        div { transform: scale(2,0.5);}        //水平缩放2倍，垂直缩放0.5倍

(3) translate (平移)，1或2个参数，参数是像素值。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0。参数也可取正负，x轴: 正值代表向右移动, 负值代表向左移动，y轴:正值代表 向下移动 , 负值 代表向上移动 。

        div { transform: translate(50px,100px); }　　 //水平平移50像素，垂直平移100像素

(4) skew (扭曲变形)，1或2个参数，参数是度数。第一个参数对应X轴(水平方向上的倾斜角度)，第二个参数对应Y轴(垂直方向上的倾斜角度)。如果第二个参数未提供，则默认值为0。

        div {  transform: skew(30deg,20deg);}        //水平方向上倾斜30度，垂直方向上也倾斜30度

(5) matrix(<number>, <number>, <number>,<number>, <number>, <number>) ：以一个含六值的(a,b,c,d,e,f）变换矩阵的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵。

        div {  transform: matrix(0.866,0.5,0,5,0.866,0,0);}        //顺时针旋转30度。

 

　　注意：顺便说一下，各大浏览器对transform属性的支持还在试验阶段，Firefox 需要添加 -moz-前缀，Chrome和Safari需要 -webkit-前缀，Opera需要 -o-前缀。IE 9 也开始支持二维矩阵变换，需要 -ms- 前缀。

 

　　二维变换矩阵

　　对于这个matrix的应用，一直很不解，不知道各个值的作用， 不明白它的运行机制。今天通过各种数据的实验，查找网上资料，对这个matrix基本会使用了。但由于没有线性代数的基础，对这个二维变换矩阵还是有些模糊，现在姑且把网上各位大神的总结整理一下，分享给大家。

Matrix方法中有六个参数，a，b，c，d，e，f。这六个参数对应的矩阵如下：

通过测试和总结，我们可以得出一下结论：

其实所有的 CSS3 变形效果，都可以用 matrix 来做到，而实际上，浏览器似乎也是把所有的效果全部转换为 matrix 去执行（只是我们并不知道而已）。
这么看來，我们可以小结一下：
1, 4 是缩放变形的结果　　scale(sx,sy)可以由matrix(sx,0,0,sy,0,0)转变
5, 6 是平移变形的结果　　translate(tx,ty)可以由matrix(1,0,0,1,tx,ty)转换而来，
2, 3 是扭曲变形的结果　　skew(θx，θy)可以由matrix(1,tan(θy),tan(θx),1,0,0)转变过来
1, 2, 3, 4 是旋转变形的结果　　rotate(θ)可以有matrix(cosθ,sinθ,-sinθ,cosθ,0,0)转变而来