css3的3D和2D

css3的3D旋转：
rorateX():参数为正值时，盒子是围绕x轴，完成从Y轴正方向到Y轴负方向的旋转，视觉上呈现高度上的变化。
rorateY():参数为正值时，盒子是围绕Y轴，完成从X轴正方向到X轴负方向的旋转，视觉上呈现盒子宽度上的变化。
css2D旋转：
translate(a,b):a,b,均大于0时，a表示是在水平方向的位移（从左向右），b是垂直方向的位移（从上往下），
rotate(a):a>0,在水平面上顺时针旋转的度数，a<0时，在水平面上逆时针旋转度数。
scale(x,y):x是指盒子宽度的变化，y是指盒子高度的变化，0-1盒子缩小，>1盒子变大。
skew(x,y):沿x轴翻转x度数，沿y轴翻转y度数。
matrix()：可以整合所有2D的转换方法，包括六个参数：a，b,c,d,e,f。
transform：属于css属性，上述方法属于该属性的值。
div{
transform:rorate(30deg);}
css3的过渡：
transition: width 1s linear 2s；
四个属性：要使用过渡的属性，过渡的时间，过渡的线性路线，过渡效果开始的时间。

css3的动画：

设置定义动画
from~to

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

0%~100%

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

绑定动画：
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}

animation: myfirst 5s linear 2s infinite alternate;
常用几个属性：1，动画名称，2，动画周期时间，3，动画速度曲线，4，动画开始时间，5，播放次数，