Different CSS3 transitions for activating and leaving :hover in a DIV?

My question is whether it is possible to have 2 different CSS3 transitions operating on the same DIV? I'd like to be able to have a rotate and increase in scale on hover (as per the code below) but then when the hover is released for the div to just scale back, without rotating, to its original size.

#listitem ul li {
    float: left; 
    margin: 0 15px 0 15px; 
    padding: 0;
}
#listitem ul li:hover{
    开发者_高级运维-webkit-transform: rotate(720deg) scale(1.5); 
    -moz-transform: rotate(720deg) scale(1.5); 
    -ms-transform: rotate(720deg) scale(1.5); 
    -o-transform: rotate(720deg) scale(1.5); 
    transform: rotate(720deg) scale(1.5);
}

It may not be possible due to how to treat the DIV when it is partially rotated.

Thanks Mike

It is possible to combine the transitions on :hover but your rotate is 2 full rotations (360deg * 2) so it will be back in the original position. Try changing to 20deg and you should be able to see the combined rotation and scaling effects. You may have to use JavaScript to keep one transition applied once the element loses the :hover.

it is possible but as the div rotate with certain angle while hover .. when hover is released it rotated back in opposite rotation and goes back to initial stage.. yes multiple effect can be applied