div{

    width: 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);

}