1.旋转
CSS：
<style>
div {
width: px;
height: px;
background-color: pink;
-ms-transform: rotate(deg);/*IE9*/
-moz-transform: rotate(deg);/*Firefox*/
-webkit-transform: rotate(deg);/*Safari 和 Chrome*/
-o-transform: rotate(deg);/*Opera*/
}
</style>
html：
<body>
<div></div>
</body>
解析：
-ms-transform: rotate(45deg); /IE9/
-moz-transform: rotate(45deg); /Firefox/
-webkit-transform: rotate(45deg); /Safari 和 Chrome/
-o-transform: rotate(45deg); /Opera/
以上四句是兼容。
rotate(45deg)意思是:表示顺时针旋转，deg是CSS3中的角度单位。
2. 缩放
-ms-transform: scale(,);/*IE9*/
-moz-transform: scale(,);/*Firefox*/
-webkit-transform: scale(,);/*Safari 和 Chrome*/
-o-transform: scale(,);/*Opera*/
解析：
transform:scale(值)；它的值是指定的缩放的倍率，比如：
0.5就是缩放到50%；
1就是100%；
1.5就是放大150%；
可能值：scale（x,y)是元素X轴Y轴同时缩放；
scaleX（x)是元素X轴缩放；
scaleY（y)是元素Y轴缩放；
3. 倾斜
-ms-transform: skew(deg,deg);/*IE9*/
-moz-transform: skew(deg,deg);/*Firefox*/
-webkit-transform: skew(deg,deg);/*Safari 和 Chrome*/
-o-transform: skew(deg,deg);/*Opera*/
transform : skew(值)；它的值就是角度，
可能值：
skew(x,y);是元素在水平和垂直方向同时扭曲，只有一个参数时只在水平方向倾斜。
skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；
skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）；
4.移动
-ms-transform: translate(px,px);/*IE9*/
-moz-transform: translate(px,px);/*Firefox*/
-webkit-transform: translate(px,px);/*Safari 和 Chrome*/
-o-transform: translate(px,px);/*Opera*/
解析：
translate(值）;值是移动的距离。
可能值：
translate(x,y);是元素在水平和垂直方向同时移动。
translateX(x)仅使元素在水平方向移动（X轴移动）；
translateY(y)仅使元素在垂直方向移动（Y轴移动）；
5.transition动画
鼠标未放上：
鼠标放上，图片颜色慢慢旋转、放大、过渡到粉色效果，离开后还原：
html：
<body>
<div class="box"></div>
</body>
CSS:
<style>
.box {
width: px;
height: px;
border: px solid #aaa;
background-color: red;
transition: all s linear; /*W3C标准*/
-webkit-transition: all s linear;/*谷歌*/
-moz-transition: all s linear;/*火狐*/
-o-transition: all s linear;/*opera*/
}
.box:hover {
background-color: pink;
transform: rotate(deg) scale(); /*W3C标准*/
-webkit-transform: rotate(deg) scale(); /*谷歌*/
-moz-transform: rotate(deg) scale(); /*火狐*/
-o-transform: rotate(deg) scale(); /*opera*/
}
</style>
解析：
all : 所有属性都将获得动画效果；也可以把all换成background一个属性，即：
transition: background 1s linear;
1s : 规定完成动画效果的需要花费的时间；
liner : 在延续时间段，变换的速率变化是匀速变化；其次还有ease(逐渐变慢)、ease-in(加速)、ease-out(减速)、ease-in-out(先加速后减速)。