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:圆形绘制