box 1
Translated to the right: -webkit-transform: translate(3em,0);
box 2
Rotated 30 degrees with the clock: -webkit-transform: rotate(30deg);
box 3
Translated to the left and down: -webkit-transform: translate(-3em,1em);
box 4
Scaled to twice its original size: -webkit-transform: scale(2);
<style type="text/css">
#submenu {
background-color: #eee;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
}
#submenu:hover {
background-color: #fc3;
-webkit-transform: rotate(360deg) scale(2);
-moz-transform: rotate(360deg) scale(2);
-o-transform: rotate(360deg) scale(2);
-ms-transform: rotate(360deg) scale(2);
}
</style>