Animasi CSS dengan Transforms

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>