CSS3变形--旋转 rotate()
03/10
旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。
例如：将文本旋转回到原来水平位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<style>
.wrapper {
margin: 100px auto;
width: 300px;
height: 200px;
border: 2px dotted blue;
}
.wrapper > div{
width: 300px;
height: 200px;
line-height: 200px;
text-align: center;
background: green;
color: #fff;
-webkit-transform:rotae(20deg);
-moz-transform:rotae(20deg);
-ms-transform:rotae(20deg);
-o-transform:rotae(20deg);
transform:rotate(20deg);
}
.wrapper > div >span{
-webkit-transform:rotate(-20deg);
-moz-transform:rotate(-20deg);
-ms-transform:rotate(-20deg);
-o-transform:rotate(-20deg);
transform:rotate(-20deg);
}
</style>
</head>
<body>
<div class="wrapper">
<div><span>我不想旋转(^_^)</span></div>
</div>
</body>
</html>效果如下图：
版权属于：
Dcr163的博客
本文链接：
http://dcr163.cn/139.html（转载时请注明本文出处及文章链接）
