Matrix滤镜简介

基本语法如下：

filter: progid:DXImageTransform.Microsoft.Matrix( enabled= bEnabled , SizingMethod= sMethod , FilterType= sType , Dx= fDx , Dy= fDy , M11= fM11 , M12= fM12 , M21= fM21 , M22= fM22 )

其中参数多多，而且名称稀奇古怪的，很容易吓着新手。所以我干脆直接简化了下，把与实现旋转与缩放功能不相关的不需要关系的参数全部一脚踹掉，于是有：

filter: progid:DXImageTransform.Microsoft.Matrix( SizingMethod= sMethod ,  M11= fM11 , M12= fM12 , M21= fM21 , M22= fM22 )

其中SizingMethod这里死活就是"auto expand"了，也就是说我们要实现元素的旋转与缩放只要关心M11, M12, M21, M22，这几个参数就是2×2矩阵中的的四个数值。虽然大学中学过线性代数还考了90多分，但是几年不碰都已经还给老师了，所以这几个参数如何实现拉伸我也是不清楚的。但是，幸好实现旋转以及缩放效果我们不需要知道的太多，我们只需要套用下面的格式就可以了。

filter:progid:DXImageTransform.Microsoft.Matrix(M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation),SizingMethod='auto expand');

只要把你需要旋转的角度将上面的roation值代替并计算出来就可以了，现在来看看如何实现比例的缩放。

如同变魔术般，一旦知道了原理就觉得很一般。同样的这里实现比例的改变也非常简单。就是将M11, M12, M21, M22的每个值分别乘以你希望缩放的比例就可以了。
例如，您想要把一个元素只是单纯的旋转135度的话直接就是(cos(135) = -0.707)：

filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.707,M12=-0.707,M21=0.707,M22=-0.707,SizingMethod='auto expand');}

但是，同时你希望元素还放大两倍，那该怎么办呢，很简单，M11, M12, M21, M22同时乘以2就可以了，也就是：

filter:progid:DXImageTransform.Microsoft.Matrix(M11=-1.414,M12=-1.414,M21=0.1.414,M22=-1.414,SizingMethod='auto expand');}

很简单吧。这就是IE矩阵滤镜Matrix下旋转与缩放的实现。

与CSS3 transform的结合

CSS3 transform中有旋转(ratate)和缩放(scale)属性。

例如实现上面所说的旋转135度，同时放大2倍的效果代码应该是：

transform:rotate(135deg) scale(2);

于是，我们将IE的Matrix滤镜和CSS3的transform属性结合旧可以实现绝大多数浏览器的元素旋转与缩放效果了。现在有个问题是Matrix滤镜的使用与计算，你说我要是旋转个75度，难道还要打开计算器去计算吗，而且filter后面长得很深奥的字符语法让人不容易记住，很折腾人的。这个问题已经有人想到了，在American，有两位前端开发者Zoltan Hawryluk 和Zoe Mickley Gillenwater就这个问题写了个工具，专门讲CSS3中简单易懂的transform属性值转换成IE的Matrix滤镜表示形式，此工具地址是：http://www.useragentman.com/IETransformsTranslator/。直接点击页面上“Translate to IE Matrix”这个按钮就好了，如下图：

结果就会生成对应的IE Matrix滤镜相关的CSS代码：

上面的工具虽然使用比较方便。但是，其功用只针对CSS，如果我们希望通过JavaScript控制图片的旋转以及缩放，那就是出拳打在棉花上——不给力。所以，我抽了点时间写了个可用使用JS非常简单的控制元素旋转以及缩放的方法。完整JavaScript代码如下：

var fnRotateScale = function(dom, angle, scale) {
    if (dom && dom.nodeType === 1) {
        angle = parseFloat(angle) || 0;
        scale = parseFloat(scale) || 1;
        if (typeof(angle) === "number") {            //IE
            var rad = angle * (Math.PI / 180);
            var m11 = Math.cos(rad) * scale, m12 = -1 * Math.sin(rad) * scale, m21 = Math.sin(rad) * scale, m22 = m11;
            if (!dom.style.Transform) {
                dom.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+ m11 +",M12="+ m12 +",M21="+ m21 +",M22="+ m22 +",SizingMethod='auto expand')";
            }            //Modern
            dom.style.MozTransform = "rotate("+ angle +"deg) scale("+ scale +")";
            dom.style.WebkitTransform = "rotate("+ angle +"deg) scale("+ scale +")";
            dom.style.OTransform = "rotate("+ angle +"deg) scale("+ scale +")";
            dom.style.Transform = "rotate("+ angle +"deg) scale("+ scale +")";
        }     
    }
};

方法名是fnRotateScale，有三个参数。第一个就是dom元素啦；第二个参数就是旋转的角度，例如旋转45度就是45,；第三个参数scale就是你希望缩放的比例了，例如希望放大两倍显示就是2就可以了。使用也是相当简单的。