div任意角度旋转解决方法

时间：2014-03-24 编辑：简简单单来源：一聚教程网

代码如下:

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

你可以尝试一下，这个是大约40多度的角度。

尝试之后瞬间觉得很强大，但是还有个问题，那就是M11--M22哪里来的？

M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation) roation就是你的角度喽，不过遗憾的是直接这样写不行的，你必须自己算出数字

最后补充一下，DXImageTransform.Microsoft.Matrix可以让你的div放大缩小，只要将M11--M22放大或缩小对应倍数就行了，不过现在的宽屏看着有误差啊。

举例说明：

代码如下

复制代码

CSS
.test-b{ width:260px; height:186px; float:right;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.5, M22=0.866 03 )" }

html

再看个例子

代码如下	复制代码
DIV旋转属性的演示旋转成功

上一个： CSS等比列放大缩小效果(宽度和高度)
下一个： css实现圆角三角形例子(无图片)

推荐专题

最新下载

热门教程

div任意角度旋转解决方法

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程