CSS3 制作动画常用的3个属性：

1. transform 变形：CSS3 2D 变形、CSS3 3D 变形 【今天讲解 2D 变形】
2. transition 过渡
3. animation 动画

transform

transform：对元素进行 2D 或 3D 变形，包括旋转 rotate、缩放 scale、移动 translate、扭曲 skew 和矩阵变形 matrix
语法：
transform: rotate | scale | skew | translate | matrix | none;
当对一个元素进行多个属性操作时，用空格隔开。

rotate

transform: rotate(30deg); 正数-顺时针，负数-逆时针，2D

scale

transform: scale(x,y) X轴和Y轴同时缩放，2D，若y未指定 则和x值一样
transform: scaleX(x) 仅X轴缩放，2D
transform: scaleY(y) 仅Y轴缩放，2D

translate

transform: translate(x,y) X轴和Y轴同时移动，2D，若y未指定 则0
transform: translateX(x) 仅X轴移动，2D
transform: translateY(y) 仅Y轴移动，2D

skew

skew 扭曲|倾斜|斜切
transform: skew(x,y) X轴和Y轴同时扭曲（同时按照一定角度进行扭曲变形），若y未指定 则0deg
transform: skewX(x) 仅X轴扭曲变形
transform: skewY(y) 仅Y轴扭曲变形

matrix

transform: matrix(a,b,c,d,e,f); 应用一个[a,b,c,d,e,f]变换矩阵，2D

transform-origin

已上5个变形都以元素的基点为参照系
transform-origin 可定义元素的基点，默认是元素的中心点

水平方向取值 left center right 即 0% 50% 100%
垂直方向取值 top center bottom 即 0% 50% 100%
若只有一个值 则表示垂直方向 0

参考

w3cplus：http://www.w3cplus.com/content/css3-transform/
w3school：http://www.w3school.com.cn/css3/css3_2dtransform.asp

前缀
-webkit- chrome safari
-moz- Mozilla ff3.5+
-ms- ie9+
-o- opera