css3变形与动画（上）

CSS3动画:

 1、旋转 rotate(n)

旋转函数rotate()通过指定的角度参数使元素相对原点进行旋转；

    n为参数，用于设置旋转的角度，如果为正，元素相对原点中心顺时针旋转；如果为负，逆时针旋转。

例：

CSS部分中的“.wrapper div”展示的效果：(n为参数，用于设置旋转的角度，如果为负，元素相对原点中心逆时针旋转；)

CSS部分中的“.wrapper span”展示的效果：(n为参数，用于设置旋转的角度，如果为正，元素相对原点中心顺时针旋转；)

2、扭曲skew()

定义：元素倾斜显示，将对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。

3种使用情况：

 

1. skew(x,y)元素同时在水平方向和垂直方向扭曲；
2. skewX(x)元素仅在水平方向扭曲；
3. 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 {