首页 > 其他 > 详细

将div旋转任意角度

时间:2014-01-24 22:53:01      阅读:528      评论:0      收藏:0      [点我收藏+]

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

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

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

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

其次,旋转任意角度

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

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

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

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

将div旋转任意角度

原文:http://www.cnblogs.com/daisyleamo/p/3532517.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!