CSS32D平移，旋转，缩放，倾斜

首先，我们先看一看效果：

四种最基本的转换：移动（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）,混合在一起做复杂变化

知识梳理：

使用这些操作变化就要使用css属性 transform：

translate(x,y);两个参数x,y ;可以是百分数（%），其他尺寸单位。一个参数没有效果。

rotate(15deg);旋转度数，牵扯到另一个属性transform-origin,改变元素变化的位置。

scale（2,2） 缩放倍数，width和height,当两个参数一样的时候，可以只写一个。

skew(15deg,15deg) 沿X轴倾斜15度，沿Y轴倾斜15度，

通过设置以上这些属性，可以改变元素的位置，变化。但是我们看不出来它的过程，还需要设置属性transition：

transition:
all  //变化元素属性 一般都设置为 all ，不用考虑挨个属性设置
3s   //3s完成， 以秒为单位
ease //变化效果 ease 渐渐变快  linear 
1s ;  //1秒之后执行动画 

通过以上这些可以完成简单的元素变化了

再配合css3 动画可以做出更炫的效果：

使用@keyframes来定义动画，让元素的属性从某个状态变化到另一个状态：

@keyframes myanimate{
    0%{
        width:0;
    }
    50%{
        width:50%;
    }
    100%{
        width:100%;
    }
}

还可以分的更细，加更多的属性进来，
下来使用定义的动画，

div{
    animation:myanimate 3s;
}

设置3s完成这个动画。animation还有其他的属性设置，和transition有相似之处。还可以规定动画播放的次数，是否逆向播放，状态（比如鼠标hover时设置停止播放动画）