html5-css动画-2d

div{
     300px;
    height: 100px;
    margin: 50px;
    padding: 50px;
    background: green;
    border:5px groove rgba(200,60,30,0.8);
    perspective(1000px);
}

#div1:hover{
    transform: translate(100px,20px);
}
#div2:hover{
    /*transform: translate(100px,0px);*/
    transform: translateX(100px);
}
#div3:hover{
    /*transform: translate(100px,0px);*/
    transform: translateY(-100px);
}

#div4:hover{
    transform: scale(1.5,0.5);
}

#div5:hover{
    transform: scaleX(1.5);
}
#div6:hover{
    transform: rotate(45deg);
}
#div7:hover{
    transform: rotate(0.3rad);
}