兼容 ie 的 transform

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