.translate{
    margin : 1em 5em;
    width : 20em;
    padding : 3em;
    border : 1px solid #333;
    background-color : pink;
}
.translate:hover{
    transform: translate(200px);
    transform: translate(50%);
    background-color : violet;
}

.scale{
    margin : 1em 5em;
    width : 20em;
    padding : 3em;
    border : 1px solid #333;
    background-color : pink;
}
.scale:hover{
    transform: scale(0.5);
    background-color : violet;
}

.rotate{
    margin : 1em 5em;
    width : 20em;
    padding : 3em;
    border : 1px solid #333;
    background-color : pink;
}
.rotate:hover{
    transform: rotate(45deg);
    background-color : violet;
}

.skew{
    margin : 1em 5em;
    width : 20em;
    padding : 3em;
    border : 1px solid #333;
    background-color : pink;
}
.skew:hover{
    transform: skew(10deg, 10deg);
    background-color : violet;
}
.multiple{
    margin : 1em 5em;
    width : 20em;
    padding : 3em;
    border : 1px solid #333;
    background-color : pink;
}
.multiple:hover{
    transform: translate(200px) translate(50%) scale(0.5);
    background-color : violet;
}

.transition{
    margin : 1em 5em;
    width : 10em;
    padding : 1em;
    border : 1px solid #333;
    background-color : pink;
}
.transition:hover{
    transform: scale(2);
    background-color : violet;
    transition: ease-in-out 0.5s;
}

#boxanim{
    margin : 1em 5em;
    width : 20em;
    padding : 3em;
    border : 1px solid #333;
    background-color : pink;
}
.animation {
    transform: scale(2) rotate(45deg);
    background-color : violet;
    transition: ease-in-out 0.5s;
}