在现代浏览器中使用CSS3的transform样式即可轻松搞定,但是对于国内IE浏览器(特别是7,8)还占有较大份额的情况下,兼容性还是必须要考虑的,所以也特意记录下IE旋转滤镜的使用。

在IE下的旋转滤镜有两种:

第一种:

CSS样式

  1. filter:progid:DXImageTransform.Microsoft.BasicImage(rotation:1)

其中rotation属性只有四个值:0,1,2,3 分别表示的旋转度数是:0度,90度,180度,270度。查看参考文档,请点击这里,但是想要旋转其他任意度数上面的方法就不适合了,这就需要下面的方法。

第二种

CSS样式

  1. filter:progid:DXImageTransform.Microsoft.Matrix(enabled=bEnabled ,SizingMethod=sMethod ,FilterType=sType ,Dx=fDx ,Dy=fDy ,M11=fM11 ,M12=fM12 ,M21=fM21 ,M22=fM22)
  • enabled:定义滤镜是否被禁止使用,取值范围为布尔值,当取值为true的时候滤镜可用;取值为false时,禁止使用滤镜。
  • SizingMethod:定义元素使用图片时是否改变属性。当取值为clip to original时,元素不改变尺寸;当取值为auto expand时,元素改变尺寸。
  • FilterType:定义元素旋转的方法。当取值为bilinear时,使用平滑、静态的显示效果;nearest neighhbor一般用于动态滤镜中。
  • Dx:定义水平方向上的向量增加量。使用浮点数定义增量的大小,默认值为1.0。
  • Dy:定义垂直方向上的向量增加量。使用浮点数定义增量的大小,默认值为1.0。
  • M11:定义元素右侧边线水平方向上的显示位置。使用浮点数定义增量的大小,默认值为1.0。当取值大于1.0时,右边线向右移动,同时拉伸元素的宽度;当取值小于1.0时,右边线向左移动,同时减小元素的宽度。
  • M12:定义元素底侧边线水平方向上的显示位置。使用浮点数定义增量的大小,默认值为0时。当取值大于0时,底部连线向右移动,同时拉伸元素的宽度;当取值小于0时,底部边线向左移动,同时拉伸元素的宽度。
  • M21:定义元素右侧边线竖直方向上的显示位置。使用浮点数定义增量的大小,默认值为0。当取值大于0时,底部边线向下移动,同时拉伸元素的高度;当取值小于0时,底部边线向上移动,同时拉伸元素的高度。
  • M22:定义元素底侧边线竖直方向上的显示位置。使用浮点数定义增量的大小,默认值为1.0。当取值大于1.0时,底部边线向下移,同时拉伸元素的高度;当取值小于1.0时,右边线向上移动,同时减小元素的高度。

以上是此滤镜全部的参数,但是平时用的最多的参数只有5个,所以可以简化为:

CSS样式

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

SizingMethod一般选择“auto expand”,它和“clip to original”值的区别如下图(图中旋转角度都为45度):

下面来说下如何计算旋转值,也就是如何计算M11,M12,M21,M22的值。

其实也很简单,用计算器算即可,如果你要做旋转动画,那么需要JS去计算,M11=cos(角度值),M12=-sin(角度值),M21=sin(角度值),M22=cos(角度值)。例如:你想要旋转10度,那么sin(10)约=0.174,cos(10)约=0.985,所以四个值相应为:M11=0.985,M12=-0.174,M21=0.174,M22=0.985

在这里也想提下,IE Matrix滤镜还可以实现放大和缩小的效果,类似于zoom样式,只要将M11,M12,M21,M22的值乘以相应的倍数即可。

Ps:在IE6和IE7中如果将滤镜写在<style>标签或者样式表中,会出现以下两个问题,

  • 此滤镜之后的样式都会失效;
  • 旋转滤镜一个页面中只允许有一个。

这两点的解决方案是:将滤镜样式直接内嵌在元素标签上。T_T

如果有更好的解决方法可以留言。想了解更多Matrix滤镜,请猛戳这里这里

这样配合CSS3样式transform即可兼容所有浏览器实现旋转效果。

原文出自:http://www.csscool.net/ie-matrix-and-css3-transform.html

兼容所有浏览器的旋转效果-IE滤镜Matrix和CSS3transform的更多相关文章

  1. 【原】CSS实现背景透明,文字不透明,兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  2. CSS实现背景透明,文字不透明,兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  3. JavaScript 图片的上传前预览(兼容所有浏览器)

    功能描述 通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器(IE6&IE6+.Chrome.Firefox). 实现要点   ● 对于 Chrome.Fire ...

  4. 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活

    图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本 ...

  5. CSS 实现图片灰度效果 兼容各种浏览器

    CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...

  6. css gray,grayscale,css变灰兼容大部分浏览器

    css gray,grayscale,css变灰兼容大部分浏览器 html { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'ht ...

  7. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  8. 兼容各浏览器的css背景图片拉伸代码

    需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...

  9. CSS兼容各浏览器的hack

    CSS兼容各浏览器的hack:建议:尽可能的手写代码,可以有效的提高学习效率和深度.浏览器的种类多,麻烦自然也多,主要是各种浏览器对某些属性的渲染效果并不相同,所以有时候需要专门针对特定浏览器或者特定 ...

随机推荐

  1. SVN提交的动作解释

    今天更新svn,发现有很多动作,其中字母代表的意思半知半解,就随手记录下来: A:add,新增 C:conflict,冲突 D:delete,删除 M:modify,本地已经修改 G:modify a ...

  2. PAT02-线性结构3 Reversing Linked List

    题目:https://pintia.cn/problem-sets/1010070491934568448/problems/1037889290772254722 先是看了牛客(https://ww ...

  3. 使用java发送QQ邮件的总结

    最近帮朋友做个网站,实现用邮箱订阅功能,所以现在把这个发送邮件的功能放在这里,算是这两天工作的总结吧! 首先,想要实现订阅功能,要把邮箱保存,但是这个做的是个小网站,前后台交互的太少了,所以我就直接保 ...

  4. 纯SVG实现的Loading动画,拿走不谢

    转载自:https://blog.csdn.net/wo_shi_ma_nong/article/details/88833828 话不多说,直接上代码. ( 到这里看效果: http://www.v ...

  5. Linux内核模块Makefile学习

    在<Linux设备驱动程序>一书中读到的内核模块编译Makefile,不是非常理解,在查询很多资料后,在这里做个总结. 书中Makefile代码: ifneq ($(KERNELRELEA ...

  6. C语言常用知识点

    C语言条件预处理命令 /* 格式: #ifdef 标识符 程序1 #else 程序2 #endif 标识符已经定义时,程序段1才参加编译 应用:如调试版本,发行版本,便于调试 */ #include ...

  7. R包安装的正确方式

    options("repos" = c(CRAN="https://mirrors.tuna.tsinghua.edu.cn/CRAN/")) if(! req ...

  8. springboot热部署(一)——Java热部署与热加载原理

    一.概述 在应用运行的时升级软件,无需重新启动的方式有两种,热部署和热加载. 对于Java应用程序来说, 热部署就是在服务器运行时重新部署项目,——生产环境 热加载即在在运行时重新加载class,从而 ...

  9. springMVC第一天——入门、整合与参数绑定

    大纲摘要: 1.Springmvc介绍 2.入门程序 3.Springmvc架构讲解 a) 框架结构 b) 组件说明 4.Springmvc整合mybatis 5.参数绑定 乱码问题解决 a) Spr ...

  10. RMAN中建立Catalog 用数据库的例子

    RMAN中可以备份metadata到control文件,也可以备份metadata到数据库中,此数据库称为catalog database. 本文参考网上文章,建立一个例子: 使用机器: 机器1:ta ...