css实现2d变形

2D变形(CSS3)
可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

变形转换 transform
1.移动 translate(x, y)

• translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
• translateX(x)仅水平方向移动（X轴移动）
• translateY(Y)仅垂直方向移动（Y轴移动）

2.缩放 scale(x, y)
可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。

• scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
• scaleX(x)元素仅水平方向缩放（X轴缩放）
• scaleY(y)元素仅垂直方向缩放（Y轴缩放）
  3.旋转 rotate(deg)
  可以对元素进行旋转，正值为顺时针，负值为逆时针；
  当元素旋转以后，坐标轴也跟着发生的转变
  调整顺序可以解决，把旋转放到最后
  注意单位是 deg 度数
  倾斜 skew(deg, deg)
  该实例通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。
  可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。
  4.语法
  动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
  语法格式：
  animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
  关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r
  animation-iteration-count:infinite; 无限循环播放
  animation-play-state:paused; 暂停动画
  5.过渡transition