如何让div旋转一定的角度任意旋转

分类栏目: css

993℃

放飞梦 发布于 发表评论

如何让div旋转一定的角度,此效果在项目开发中很常见,接下来将介绍实现方法,有需要 了解的朋友可以参考下

m11,m12,m21.m22是控制角度的 

<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> 
<!--[if IE]> 
<style type="text/css"> 
#example { 
top: 50px; 
left: 50px; 
} 
</style> 
<![endif]--> 
</head> 
<body> 
<div id="example"> 旋转成功</div> 
</body> 
</html> 


  友情赞助
微信二维码
支付宝二维码
  选择分享方式

版权:若无特殊注明,本文皆为放飞梦原创,转载请保留文章出处。

链接:如何让div旋转一定的角度任意旋转 - http://www.lauxin.net/css/71.html

发表评论
    已评论(0)