div任意角度旋转解决方法-百分百源码网

div任意角度旋转解决方法

发布时间：01/15 来源：浏览：关键词：

下面我们一起来看一个关于利用css让div任意角度旋转的例子，希望此例子对各位同学会带来帮助哦。

代码如下:

代码如下
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 class="test-b"><img src="../旅游】/images/middle-a.jpg" /></div>

再看个例子

代码如下

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DIV旋转属性的演示</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<style type="text/css">
body {
font-family: "Arial", sans-serif;
}
#example {
position: absolute;
border: #09F solid 1px;
font-weight: 900;
padding: 10px;
display: block;
width: 500px;
height: 400px;
margin-top: -1px;
margin-left: -1px;
transform: rotate(40deg);
-o-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1.2660444431189777, M12=-0.3327876096865394, M21=0.1127876096865398, M22=0.9660444431189779);
}
</style>

</head>
<body>
<div id="example"> 旋转成功</div>
</body>
</html>

打赏