CSS3动画:
1、旋转 rotate(n)
旋转函数rotate()通过指定的角度参数使元素相对原点进行旋转;
n为参数,用于设置旋转的角度,如果为正,元素相对原点中心顺时针旋转;如果为负,逆时针旋转。
例:
CSS部分中的“.wrapper div”展示的效果:(n为参数,用于设置旋转的角度,如果为负,元素相对原点中心逆时针旋转;)
CSS部分中的“.wrapper span”展示的效果:(n为参数,用于设置旋转的角度,如果为正,元素相对原点中心顺时针旋转;)
2、扭曲skew()
定义:元素倾斜显示,将对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。
3种使用情况:
- skew(x,y)元素同时在水平方向和垂直方向扭曲;
- skewX(x)元素仅在水平方向扭曲;
- skewY(y)元素仅在垂直方向扭曲;
例:
HTML部分:
<div class="wrapper">
<div><span>我不想旋转(^_^)</span></div>
</div>
CSS部分:
.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: skew(45deg);
-moz-transform: skew(45deg);
transform: skew(45deg);
}
.wrapper span {