【CSS3动画】transform对文字及图片的旋转、缩放、倾斜和移动

前言：之前我有写过CSS3的transform这一这特性，对于它的用法，还不是很透彻，今天补充补充，呵呵 你懂的，小司机准备开车了。

a)再提一提transform的四个属性

　　①旋转--->rotate(参数a)，单位deg，表示旋转角度，正数顺时针，负数逆时针。

　　②缩放--->scale(参数a)，单位1，也就是“没有单位”，赤裸裸的0-1之间的数字就行，表示为缩放比例。

　　③倾斜--->skew(参数a,参数b)，单位deg，两个参数分别表示x,y方向上的倾斜角度，正数顺时针，负数逆时针。

　　④移动--->translate(参数a)，单位px，移动方向是在div这个平面方向上(这样说起来，应该有点难理解，放在四维坐标中，把div看做是任意一个平面来理解)，也有正数之分，正向前，负向后。

 

1)旋转(rotate)，我们先来做一个文字的旋转，就像下面这样

/* HTML */
<div class="div1">我只是一个示例</div>

然后再给它写点样式

 1 /* CSS */
 3 　　　　.div1 {
 4                 width: 200px;
 5                 height: 50px;
 6                 font-size: 20px;
 7                 line-height: 50px;
 8                 text-align: center;
 9                 border: 1px solid;
10                 margin: 100px auto;
11                 -moz-transform: rotate(45deg);/* Firefox 旋转属性，参数表示角度(deg表示角度)，负数逆时针，正数顺时针 */                
12                 -webkit-transform: rotate(45deg);/* Safari和Chrome */
13                 -ms-transform: rotate(45deg);/* IE 9 */
14                 -o-transform: rotate(45deg);/* Opera */
15             }

 

这是效果图：下图是一行文字，被顺时针旋转45度后的效果图。

 

2）缩放(scale)

1 /* HTML */
2 <div class="div2">我只是一个示例&l