将div旋转任意角度

首先,90度,180度,270度的旋转,代码如下:

将div旋转任意角度
-webkit-transform: rotate(90deg);/*Safari 4+,Google Chrome 1+ */
-moz-transform: rotate(90deg);/*Firefox 3.5+*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie*/
将div旋转任意角度

上面2个都好理解,不同浏览器下的旋转90度
下面IE滤镜 rotation (0—不旋转  1—90度 2—180度 3—270度)

此样式只能放在css声明中使用。

其次,旋转任意角度

除了ie,其他浏览器都可以任意写,ie浏览器任意旋转需要ie矩阵滤镜,代码如下:

将div旋转任意角度
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod=‘auto expand‘, M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)";
将div旋转任意角度

M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation) ——roation即控件转的角度

但是,M11、M12的值必须是数字,因此必须算出三角函数值,网址(http://www.ab126.com/geometric/1689.html

将div旋转任意角度

上一篇:2012年的MBP准备升级


下一篇:黑马程序员--常见区别