2D动画效果transform

transform:2D转换
1，移动：translate
　　transform:translate(x,y); //translate(x,y) 定义 2D 转换。
　　　　translateX(x) //定义转换，只是用 X 轴的值。
　　　　translateY(y) //定义转换，只是用 Y 轴的值。
　　transform:translate(x,y,z); // translate3d(x,y,z) 定义 3D 转换。
　　　　translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
2，旋转:rotate(360deg)； //deg为旋转的角度；
　　配合transition过渡属性用
　　transform:rotate(360deg)； //值可以为负值，代表逆时针旋转；
　　rotate(angle) 定义 2D 旋转，在参数中规定角度。
3，缩放:scale //正数放大，负数缩小，值可以为小数；
　　transform: scale(x,y); //x,y不跟单位，1就是一倍，倍数放大缩小；
　　scale(2) //整个放大两倍；
4，transition:过度属性 过度时间 曲线 延迟；
　　transition: height 1s,width 2s;
　　transition:all 1s; //all代表全部属性；
5，transform-origin:旋转中心点
　　transform-origin: left right bottom right center; //也可以是像素px；