将div旋转任意角度

时间:2021-08-23 17:34:27

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

-webkit-transform: rotate(90deg);/*Safari 4+,Google Chrome 1+ */
-moz-transform: rotate(90deg);/*Firefox 3.5+*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie*/

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

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

其次,旋转任意角度

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

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)";

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

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