兼容所有浏览器的旋转效果-IE滤镜Matrix和CSS3transform
在现代浏览器中使用CSS3的transform样式即可轻松搞定,但是对于国内IE浏览器(特别是7,8)还占有较大份额的情况下,兼容性还是必须要考虑的,所以也特意记录下IE旋转滤镜的使用。
在IE下的旋转滤镜有两种:
第一种:
CSS样式
- filter:progid:DXImageTransform.Microsoft.BasicImage(rotation:1)
其中rotation属性只有四个值:0,1,2,3 分别表示的旋转度数是:0度,90度,180度,270度。查看参考文档,请点击这里,但是想要旋转其他任意度数上面的方法就不适合了,这就需要下面的方法。
第二种
CSS样式
- 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样式
- 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的更多相关文章
- 【原】CSS实现背景透明,文字不透明,兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
- CSS实现背景透明,文字不透明,兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
- JavaScript 图片的上传前预览(兼容所有浏览器)
功能描述 通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器(IE6&IE6+.Chrome.Firefox). 实现要点 ● 对于 Chrome.Fire ...
- 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活
图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本 ...
- CSS 实现图片灰度效果 兼容各种浏览器
CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...
- css gray,grayscale,css变灰兼容大部分浏览器
css gray,grayscale,css变灰兼容大部分浏览器 html { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'ht ...
- JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
- 兼容各浏览器的css背景图片拉伸代码
需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...
- CSS兼容各浏览器的hack
CSS兼容各浏览器的hack:建议:尽可能的手写代码,可以有效的提高学习效率和深度.浏览器的种类多,麻烦自然也多,主要是各种浏览器对某些属性的渲染效果并不相同,所以有时候需要专门针对特定浏览器或者特定 ...
随机推荐
- CCF认证201712-1最小差值
问题描述 给定n个数,请找出其中相差(差的绝对值)最小的两个数,输出它们的差值的绝对值. 输入格式 输入第一行包含一个整数n. 第二行包含n个正整数,相邻整数之间使用一个空格分隔. 输出格式 输出一个 ...
- ios学习路线—Objective-C(装箱和拆箱)
概述 从前面的博文我们也可以看到,数组和字典中只能存储对象类型,其他基本类型和结构体是没有办法放到数组和字典中的,当然你也是无法给它们发送消息的也就是说有些NSObject的方法是无法调用的,这个时候 ...
- 文字属性和div容器盒的使用基础
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Scala模式匹配常用
今天在工作中遇到的几个小问题,总结一下: 1.因为业务需要调用PHP的接口,获取到的返回体需要做一段逻辑处理,然而某个字段接收到的参数是io.serializable类型,字段的类型不是预期的stri ...
- Matlab 装自定义模块
Matlab for Mac 右上角有一个set path选项. 点进去再点击 add with subfolders. 把你下载好的且解压过的工具箱添加进去 然后点save. 重启,就可以直接用了.
- JavaScript总结(五)
详解DOM(文档对象模型(Docment Object Model)) ✍ DOM中定义了许多节点类型来表示节点的多个方面: 文档节点Document 最顶层的节点(跟节点),代表整个HTML文档, ...
- Oracle数据库的非归档模式迁移到归档模式
先观察当前的状态: [root@o_target ~]# su - oracle [oracle@o_target ~]$ sqlplus / as sysdba SQL*Plus ...
- P2939 [USACO09FEB]改造路Revamping Trails
P2939 [USACO09FEB]改造路Revamping Trails 同bzoj2763.不过dbzoj太慢了,bzoj又交不了. 裸的分层图最短路. f[i][j]表示免费走了j条路到达i的最 ...
- 如何优化mysql查询速度
1.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用索引而进行全表扫描. 2.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉 ...
- pycharm如何显示工具栏
1.没有工具栏的效果图如下: 2.在view中找到Toolbar打上勾即可显示: 3.工具栏设置成功显示效果图如下: 3.如何显示一个类或方法所在的文件,以及该文件下的所有方法,可以快速定位到该行