欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

IE矩阵Matrix滤镜旋转与缩放及如何结合transform

程序员文章站 2023-08-15 14:40:01
本文将介绍IE矩阵Matrix滤镜旋转与缩放及如何结合transform,需要了解的朋友可以参考下... 12-11-29...
一、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值代替并计算出来就可以了,这个在“图片旋转效果的一些研究、jquery插件及实例” 一文中已经有过介绍了,这里就不赘述了。现在来看看如何实现比例的缩放。
如同变魔术般,一旦知道了原理就觉得很一般。同样的这里实现比例的改变也非常简单。就是将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)属性,详细可参见“css3 transitions, transforms和animation使用简介与应用展示”一文。
例如实现上面所说的旋转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滤镜旋转与缩放及如何结合transform 
结果就会生成对应的ie matrix滤镜相关的css代码:
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
上面的工具虽然使用比较方便。但是,其功用只针对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就可以了。使用也是相当简单的。
举个例子,例如现在页面上有张id为testimage的图片,我们希望这张图片旋转45度同时尺寸变成原来的两倍,该怎么办,很简单,直接套用上面的方法就可以了,js代码如下:
fnrotatescale(document.getelementbyid("testimage"), 45, 2);就搞定了。无论你手上是什么浏览器,您可以狠狠地点击这里:matrix+transform下元素旋转缩放js测试demo
此demo实现的就是上面的旋转45度同时元素尺寸放大2倍的效果,例如ie8浏览器,将会看到如下截图所示的效果:
IE矩阵Matrix滤镜旋转与缩放及如何结合transform 
一些说明
1. 系统原因(xp),没能在ie9下测过效果,希望有ie9的同行可以告知下效果如何,以便改进。
2. 现代浏览器下css3的transform旋转与缩放不会改变原先元素占据的空间,但是matrix旋转与缩放却是会改变容器的尺寸的,且不是以元素中心为原点进行旋转与缩放的,所以位置与transform是有差别的,且貌似ie8的定位于ie6/7也不一样。这些不兼容的问题可以用css进行修复(如demo页面),但这是治标不治本的方法。更好的方法应该是对fnrotatescale方法进行进一步的提升,例如克隆元素绝对定位等,时间精力等原因,我这里就不折腾兼容性定位的问题了。

三、结尾的点唠叨
纵使ie滤镜有长得丑,性能遭等不足,但是,有时候我们为了兼顾ie浏览器,同时实现某些不得已的功能或是效果,还是不得不使用它的,正所谓“人生不如意事常八九”。做技术的偏执狂的比例还是比较高的,应该有人就是死活不使用ie的滤镜功能的,所以本文对其而言意义就不大了,但是,不管怎样,对于拓展些眼界,开阔些思维还是应该有些帮助的。
已经零点了,时间不早了,肚子也饿了,今儿还要起早去钓鱼,所以其他一些场面的话就不多说了。有错误有疑问评论或是邮件联系。