css 2d transform 是 css3 引入的一个新的 css 属性,特别是可以很方便对元素进行旋转和扭曲变换,摆脱了传统枯燥的方方正正的形象,很好玩,但其实 ie 早就支持这种变化了,通过 matrix 滤镜在一些限制条件下完全可以达到同样的效果.
兼容
从角度转化为 matrix 滤镜所需要的矩阵值涉及基础的坐标旋转方面的知识,可参考 wiki . 简单举例:
假设对应 css3 rotate(30deg),那么只要将以下矩阵值赋给 matrix filter 对应元素并设置 SizingMethod='auto expand' 即可:
rad=30*Math.PI/180;
[
cos rad, -sin rad
sin rad, cos rad
]
问题
但 ie 设置滤镜后并不是和 css3 完全对照,存在一些差异
1. ie 下旋转会改变该元素的 layout,进而影响整个文档流
例如 100*200 的元素(红点表示中心点)
在旋转 60 度后会变成 224*187,ie 会选择一个最小的矩形来渲染旋转后的元素
那么其周围的元素都会受其影响.这点就意味着,为了达到 css3 同样的效果就需要该元素为绝对定位。
2. ie 旋转点不固定
css3 transform 是绕着 transform-origin 进行变化,从而保持 transform-origin 所代表的点在坐标中保持不变:
而 ie 的原则却是始终保持旋转后的矩阵左上角和原始矩阵对齐,如图2 所示.
而无论绕哪个点旋转,最终经过坐标平移一个值后总可以使得旋转后图像重合(证明本次略过)。那么只要找到该值,将 ie 旋转后的图像整体平移后即可达到对应 css3 的效果。
注意到旋转前后中心点的位置是已知的(图中红点)
准备
坐标平移到原始元素矩阵左上角,即原始元素矩阵左上角为坐标原点 (0,0) ,那么原始中心点为
(w/2,h/2)
(w,h为旋转前原始元素的宽高)。
ie 旋转后的矩阵左上角坐标仍为
(0,0)
那么原始中心点为
(w'/2 ,h'/2)
(w',h' 为ie旋转后的矩阵宽高)。
css3
如果按照 css3 算法,原始 router 要绕 transform-origin 来旋转,假设为
(ox,oy)
那么再次进行坐标旋转,原点为 (ox,oy),那么旋转前中心点为:
(w/2-ox,h/2-oy)
中心点旋转后坐标为
(cx',cy') = m*(w/2-ox,h/2-oy)
(m 为先前计算的变化矩阵)
在原始元素矩阵左上角为坐标原点情况下坐标为:
(cx'+ox,cy'+oy)
平移修正
而 ie 旋转后中心点坐标为
(w'/2,h'/2)
那么 ie 需要平移
(cx'+ox-w'/2 , cy'+oy-h'/2)
才能符合 css3 的算法。
具体到如何平移,则可以通过 marginTop/marginLeft ,也可以通过 left/top。
demo
简单的钟摆
还有一个有趣过时的 ie hack:圆形绘制
- 大小: 1.3 KB
- 大小: 6.3 KB
- 大小: 4.4 KB
分享到:
相关推荐
ie-css-transform 您将 css 转换(2d 或 3d)和可选的转换原点值传递给的函数,它将尝试为 ie6 - ie8 模拟它。 对于支持 css 转换的浏览器,它只会使用 css 转换属性。 IE 中支持的变换属性:所有 2d 和 3d 变换...
网上流传很多种版本,经过本人的一番研究,做成能够兼容firefox、chrome、IE等各主流浏览器的版本,跟大家分享一下。最终完成的效果 新浏览器的实现 指的是firefox、chrome和IE9。新浏览器都支持CSS3新添的transform...
在编写处理xml的网页时,经常为浏览器兼容性头疼。于是我将常用的xml操作封装为函数。经过一段时间的改进,现在已经很稳定了,用起来很舒服。 函数有—— xml_loadFile:xml同步/异步加载。 xml_transformNode:xsl...
一个css transform效果(是不是很有图片的感觉),兼容IE,FF,Chrome,Safari,不支持Opera
几天一直在研究xslt转换xml为xhtml,前面文章有介绍 使用xslt将xml解析成xhtml 的
需要注意的是这三个属性都是css3新增的属性,各大浏览器支持方面还不是特别好,使用时要特别注意浏览器的兼容性,本文重点介绍Transform的使用方法,具体内容如下 浏览器支持情况: Internet Explorer 10、Firefox、...
该导航菜单主要通过CSS3 transform和transition方法实现效果,非常简单。该特效由進擊的燊提供。本代码适用浏览器:搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗,不支持IE8及以下浏览器。有兴趣的...
自己写的一个拖拽库,基于原生JS实现,无任何依赖,同时还做了IE8的兼容,在IE8的情况下transform回退到position实现。拖拽的动画通过绑定在render函数上的requestAnimationFrame实现而不是使用mousemove回调。
这是一款使用jquery和CSS3制作的3D旋转立方体特效。该特效使用GSAP来制作动画,通过CSS transform来制作立方体效果兼容除IE之外的其它现代浏览器。
还在兼容IE9的同学要谨慎使用。 CSS 坐标系 在了解animtion之前,我们有必要先了解css的坐标系,因为很多的animation效果都和元素的坐标密切相关。在css3中网页不再是一个二维平面,而是一个三维空间,水平方向、...
支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现 google code地址:http://code.google.com/p/jqueryrotate/ 下面了解下这个插件...
1.transform:rotate(45deg) 2.border-top-left-radius 该属性允许您向元素添加圆角边框 3.border-radius 该属性允许您向元素添加圆角边框 4.box-shadow 属性向框添加一个或多个阴影 5.text-shadow 属性向文本设置...
那么今天就来介绍这款fullPage,与fullPage.js是不同的,fullpage兼容性更佳,能向下兼容到IE6, 不依赖任何 js 库,可独立使用。功能上虽然不如 fullPage.js 强大,但一般使用已经足够了,尤其是它的动画效果,你...
TypeScript的可选链接ts... 该模块包括两个可选的链接实现: ES6代理实现:琐碎的设置,但与IE 11等旧版浏览器不兼容。 TypeScript自定义代码转换器:并与旧版浏览器兼容。安装npm i --save ts-optchainES6代理不需要其
text-shadow 语法 CSS Code复制内容到剪贴板 text-shadow: h-shadow v-shadow blur color; 实例 基础的文本阴影效果: CSS Code复制内容到剪贴板 ...兼容IE的写法: 滤镜语法: Eg: CSS Code复制内容
其实了解css3的朋友,一看到这个效果,脑子中瞬间出现的就是transform这个属性,是的,这个确实可以,也很简单,就是有一个问题要注意浏览器的兼容性问题,大家心里要要时刻保持着危机意识(IE还存在呢),如果你们...
这里的jQuery抖动导航菜单效果,兼容IE7/8/9及其它主流浏览器,使用方法:先引入jQuery脚本库和jquery.shake.js文件,然后在需要的元素上调用shake( )方法,例如想使整个页面抖动,则这么写:$(‘body’).shake( ),...
1、flex布局 .father { display: flex; justify-content: center; align-items: center; } ...这种方式兼容性不好 ...IE9以下不支持transform属性 3、table + table-cell .father { display: tabl