animate和translate

transition, transform, tanslate,animation分别为过渡，变换，平移、动画。transform的属性包括：rotate() / skew() / scale() / translate(,) 。

　　transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
　　为了更好地理解 transform 属性，请查看这个演示。

　　默认值：none    

　　继承性：no

　　版本：CSS3

　　JavaScript 语法：object.style.transform="rotate(7deg)"

　　语法
　　transform: none|transform-functions;

　　值                  描述

　　none    定义不进行转换。
　　matrix(n,n,n,n,n,n)    定义 2D 转换，使用六个值的矩阵。
　　matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)    定义 3D 转换，使用 16 个值的 4x4 矩阵。
　　translate(x,y)    定义 2D 转换。
　　translate3d(x,y,z)    定义 3D 转换。
　　translateX(x)    定义转换，只是用 X 轴的值。
　　translateY(y)    定义转换，只是用 Y 轴的值。
　　translateZ(z)    定义 3D 转换，只是用 Z 轴的值。
　　scale(x,y)    定义 2D 缩放转换。
　　scale3d(x,y,z)    定义 3D 缩放转换。
　　scaleX(x)    通过设置 X 轴的值来定义缩放转换。
　　scaleY(y)    通过设置 Y 轴的值来定义缩放转换。
　　scaleZ(z)    通过设置 Z 轴的值来定义 3D 缩放转换。
　　rotate(angle)    定义 2D 旋转，在参数中规定角度。
　　rotate3d(x,y,z,angle)    定义 3D 旋转。
　　rotateX(angle)    定义沿着 X 轴的 3D 旋转。
　　rotateY(angle)    定义沿着 Y 轴的 3D 旋转。
　　rotateZ(angle)    定义沿着 Z 轴的 3D 旋转。
　　skew(x-angle,y-angle)    定义沿着 X 和 Y 轴的 2D 倾斜转换。
　　skewX(angle)    定义沿着 X 轴的 2D 倾斜转换。
　　skewY(angle)    定义沿着 Y 轴的 2D 倾斜转换。
　　perspective(n)    为 3D 转换元素定义透视视图。