CSS3 transform属性

我还依稀记得刚学完出来面试的时候 问我CSS3动画会吗，我说会 transform和translation吗 

假如我们设置了一个div {width:100px; height: 100px; background-color:red}

我们可以这样设置他 （2D）

div{

 transform : translate( key , value )；  //如果只有key值， 表示平移，俩值都有就是水平和竖直移动了

        transform : translateX(value); // 表示x轴方向移动

        transform : translateY(value); // 表示Y轴方向移动

 transform :scale( x , y ) ； //表示缩放

 transform:rotate( angle )； //angle表示度数 单位deg 比如30deg

 transform : skew( x , y ) ; //表示沿着 X 和 Y 轴的 倾斜转换。

 //也可以单独设置
  transform : skewX( x )

 transform : skewY( y )

 //设置旋转的中心点

transform-origin : 50% 50% //div的中心点

}