通过transform来实现的2D/3D的转换

转换：是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，

甚至支持矩阵方式，配合过渡和动画知识，可以取代大量之前只能靠Flash才可以实现

的效果。在css3 当中，通过transform(变形) 来实现2d 或者3d 转换,有四种，缩

放，移动，旋转，倾斜。

（1）缩放：scale（x,y）对元素进行水平和垂直方向的缩放，x、y的取值可为小数， 

                   不可为负值；

.box>div{
    width: 300px;
    height:150px;
    border: 1px solid #000;
    background-color: red;
    float: left;
    margin-right: 30px;
}
div:nth-child(2){
    background-color: pink;
    transition:all 1s;
}
div:nth-child(2):hover{
    /*width: 600px;*/
    /* 变形*/
    /*
        scale: 缩放
        scale(水平放缩比例，垂直放缩比例)；
        大于1：放大
        小于1：缩小
        如果只写一个值等比例缩放
    */
    transform: scale(2,0.5);

（2）移动：translate（x,y）改变元素的位置，x、y可为负值；

.box{
    width: 300px;
    height: 300px;
    background-color: red;
    margin:100px auto;

    transition:all 1s;
    color:#fff;
    font-size:50px;

}
/* rotate（角度） 旋转
    正值 顺时针
    赋值：逆时针
*/
.box:hover{
    transform:rotate(-945deg);
}

（3）旋转：rotate（deg）正值为顺时针，负值为逆时针；

.out{
    width: 300px;
    height: 150px;
    background-color: pink;
    margin-top:200px;
    position: relative;
}

.out::before{
    content:"";
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: pink;
    transform:rotate(45deg);
    left:40%;
    top:-15px;

}