ie旋转滤镜Matrix

旋转一个元素算是一个比较常见的需求了吧，在支持CSS3的浏览器中能够使用transform很容易地实现，这里有介绍：http://www.css88.com/archives/2168，这里有演示http://www.css88.com/tool/css3Preview/Transform.html，就再也不介绍了。

在IE下旋转一个元素，则只能靠滤镜了。

若是只是以90度为单位旋转的话，简单地使用这个滤镜就好：

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=i)

其中i取0，1，2，3，分别表明旋转90度、180度、270度、360度。

而若是要实现任意角度旋转，则要使用Matrix（矩阵）滤镜。

网上介绍的方法都是这样：

filter:progid:DXImageTransform.Microsoft.Matrix(M11=m11,M12=m12,M21=m21,M22=m22,sizingMethod="auto expand");

设旋转角为x，用弧度表示。那么m11=cos(x),m12=-sin(x),m21=sin(x),m22=cos(x)

正弦sin的诱导公式（对边比斜边）

sin(2kπ+α)=sin α 
sin(π/2-α)=cos α
sin(π/2+α)=cos α 
sin(-α)=-sin α
sin(π+α)=-sin α 
sin(π-α)=sin α

余弦cos的诱导公式（邻边比斜边）

cos(2kπ+α)=cos α 
cos(π/2-α)=sin α 
cos(π/2+α)=-sin α
cos(-α)=cos α
cos(π+α)=-cos α 
cos(π-α)=-cos α

实测这个方法有效，可是它会绕元素原来轮廓的左边和上边转动，仍是画个图示意一下：

如图所示，图形会贴着上边和左边旋转。

那若是咱们要绕中间点旋转的话要怎么作呢？这就说来话长了，得讲到几何的向量方法。

坐标系中，每一个点有一个坐标，好比点p(3,4)，横坐标为3，纵坐标为4。

接下来，向量：简单理解为有方向的线段。

将点和原点链接起来，方向从原点指向点，即构成一个向量op。

经过这样的方式，咱们就将向量与点一一映射起来了，研究点的时候就能够用向量来研究啦。

 

接下来，研究旋转的实质，P点绕原点O（顺时针）旋转角度α，即向量OP旋转α，新的点P‘坐标变为(3cosα-4sinα,4sinα+3cosα).

为何会是这个值，

 被旋转了  并但愿知道旋转后的坐标 :

或

请参阅http://zh.wikipedia.org/wiki/%E6%97%8B%E8%BD%AC（数学里面以逆时针为正方向，因此公式在符号上略有不一样）

上面新坐标中，在原坐标上进行的计算的数cosα,-sinα,sinα,cosα恰好就是上上面IE的matrix中的参数m11,m12,m21,m22！

事实上，上面的计算通常会写成矩阵的方式来进行，见维基百科的表示方法。

因此，matrix滤镜的实质是对图形进行坐标的矩阵运算。

上面说的是绕原点O旋转，若是绕的是非原点呢？状况比较复杂，详见http://hi.baidu.com/windsion/blog/item/b4a41951699aa0c9b645ae4f.html。

大体分为三步：

1. 总体位移，即把中心点和向量作相应位移，使旋转点变为原点
2. 绕原点旋转，和上面说的同样
3. 总体位移，再将中心点移回原来的地方去

这个时候，计算的矩阵就变得复杂了（上面文章的最下方）。

而事实上，这个矩阵是能够化简的，详见这里http://stackoverflow.com/questions/5051451/javascript-ie-rotation-transform-maths

最终，咱们获得除了上面的m11,m12,m21,m22以外的另外两个数，这两个数在IE的matrix滤镜中表示为Dx,Dy。

将这六个参数写入matrix滤镜，便可绕中心点旋转了。

完整的写法：

progid:DXImageTransform.Microsoft.Matrix(Dx=dx,Dy=dy,M11=m11,M12=m12,M21=m21,M22=m22);

其中

dx=-width/2*cosdeg+height/2*sindeg+width/2, dy=-width/2*sindeg-height/2*cosdeg+height/2 m11,m12,m21,m22与前面说的同样。

哦哦，对了，微软官方说了http://msdn.microsoft.com/en-us/library/ms532872(v=vs.85).aspx，若是sizingMethod=”auto expand”，那么Dx、Dy是无效的哦。因此去掉就好啦。

最后的最后，sizingMethod是什么意思呢，若是不设它的话，旋转对象的容器大小会是固定的，因此可能有遮挡的状况，本身要调整好大小，而若是它被设为auto expand，就是自动扩展的意思，即旋转时外面的容器大小会自动调整，以便不遮挡正在旋转的元素。