Multiple, simultaneous CSS3 transform transitions at varied speeds

Question

Question:

Is it even possible to do two different transforms on an element and have them transition at different speeds?

Example without transforms (Fiddl

Answer 1

You could try to use animations.

div {
  width: 100px;
  height: 100px;
  background: red;
}

div:hover {
  -webkit-animation: anim1 2s linear;
}

@-webkit-keyframes anim1{
  0% { -webkit-transform: scale(1) rotate(0deg); }
  50% {-webkit-transform: scale(1.5) rotate(22.5deg); }  
  100% { -webkit-transform: scale(1.5) rotate(45deg); }
}

You would need to also set up the reverse for that hover out effect.