css动画

2D变换

1.移动

向右移动100像素，向下移动100像素：
transform:translate(100px,100px)
-webkit-transform: translate(100px,100px); /safari chrome/
-ms-transform: translate(100px,100px);/IE/
-o-transform: translate(100px,100px);/opera/
-moz-transform: translate(100px,100px);/firefox/

2.旋转

顺时针旋转45°
transform:rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);

3.缩放

宽变为原来的2倍，高变为原来的3倍
transform:scale(2,3);
-webkit-transform: scale(2,3);
-ms-transform: scale(2,3);
-o-transform: scale(2,3);
-moz-transform: scale(2,3);

4.倾斜

x轴倾斜20°，Y轴倾斜30°
transform:skew(20deg,30deg);
-webkit-transform: skew(20deg,30deg);
-moz-transform: skew(20deg,30deg);
-ms-transform: skew(20deg,30deg);
-o-transform: skew(20deg,30deg);

3D变换

绕X轴旋转90°
transform: rotateX(90deg);
-webkit-transform: rotateX(90deg);
-moz-transform:rotateX(90deg);
-ms-transform:rotateX(90deg);
-o-transform: rotateX(90deg);

绕Y轴旋转90°
transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
-moz-transform:rotateY(90deg);
-ms-transform:rotateY(90deg);
-o-transform: rotateY(90deg);

添加过度效果：
简写，表示所有的动画效果都会在2s内逐步完成，从而让动画动起来连贯起来
-webkit-transition: 2s;
-moz-transition: 2s;
-ms-transition: 2s;
-o-transition: 2s;
transition:2s;