变形

<style type="text/css">     
.box,.box2,.box3,.box4{     
    width: 200px;       
    height: 200px;      
    background-color: gold;     
    margin: 50px auto 0;        
    transition: all 1s ease;        
}       
.box:hover{     
    /*box的动画不会影响到box2*/     
    /*位移*/      
    transform: translate(50px,50px);        
}       
.box2:hover{        
    /*沿Z轴旋转360度*/       
    transform: rotate(360deg);      
}       
.box3:hover{        
    /*缩放*/      
    transform: scale(0.5,0.2);      
}       
.box4:hover{        
    /*斜切*/      
    /*transform: skew(45deg,0);*/       
    transform: skew(0,45deg);       
}   
</style>

元素旋转

• 默认沿Z轴旋转

transform: rotate(45deg);perspective

设置透视距离，经验数值800比较符合人眼的透视效果

transform: perspective(800px) rotateX(45deg);

.box{       
    width: 300px;       
    height: 300px;      
    background-color: gold;     
    margin: 50px auto 0;        
    transition: all 500ms ease;     
    /*设置盒子按3D空间显示*/     
    transform-style: preserve-3d;       
    transform: perspective(800px) rotateY(0deg);        
}       
.box:hover{     
    /*默认沿Z轴旋转*/     
    /*transform: rotate(45deg);*/       
    /*perspective设置透视距离，经验数值800比较符合人眼的透视效果*/              
        /*transform: perspective(800px) rotateX(45deg);*/       
    transform: perspective(800px) rotateY(-45deg);      
}   
</style>

变形中心点

<style type="text/css">     
div{        
    width: 200px;       
    height: 200px;      
    background-color: gold;     
    float: left;        
    margin: 30px;       
    transition: all 500ms ease;     
}       
div:hover{      
    transform: rotate(-90deg);      
}       
div:nth-child(1){       
    /*设置变形的中心点*/        
    transform-origin: left center;      
}       
div:nth-child(2){       
    transform-origin: left top;     
}       
div:nth-child(3){       
    transform-origin: 50px 50px;        
}   
</style>