css 3 animation

1.角度变化：

　　　　 -webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

可以配合js实现简单旋转动画：

<div id="nav"></div>
<script type="text/javascript">
setInterval(aa, 100);
var a = 0;

function aa() {

$('#nav').css('-webkit-transform', 'rotate(-' + a + 'deg)');

a += 4;
if (a > 360) {
a = 0;
}

}
</script>

2.缩放：scale

　　　　-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-o-transform: scale(2); }
scale参数是缩放的倍数。  整数是放大，小数是缩小、 负数 是 先翻转再缩放

3.transform 重新定义元素的x,y 值

　　　　 -moz-transform: translate(10px, 20px);
	-webkit-transform: translate(10px, 20px); 
	-o-transform: translate(10px, 20px); 

是原来的 元素的 x值+ 10px y值 +20px。 

4.  x,y同时旋转 skew

-moz-transform: skew(-50deg, -10deg);
-webkit-transform: skew(-50deg, -10deg);
-o-transform: skew(-50deg, -10deg);

x轴旋转50度，y轴旋转10度 。这会造成 原始元素的形变。

 

5.矩阵  matrix

　　　　 -moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
	-webkit-transform: matrix(1, -0.2, 0, 1, 0, 0); 
	-o-transform: matrix(1, -0.2, 0, 1, 0, 0);