2

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

Improve this question
2
  • not possible i'm afraid, not using JUST css :)
    – benhowdle89
    Commented Jul 19, 2011 at 15:37
  • I feared as much! Thanks for taking the time to reply.
    – user114671
    Commented Jul 19, 2011 at 15:55

2 Answers 2

Reset to default
1

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.

Improve this answer
1
  • Thanks for you reply, andyb. I think I've worded my question badly - the scale and rotate works well on the :hover but I wonder whether I could just have the scale - and not the rotate - when the hover is over. Does that make more sense?
    – user114671
    Commented Jul 19, 2011 at 15:53
0

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

Improve this answer
1
  • only scale not rotation while hover out is not done in css3 transition may be it is applicable with some help of javascript
    – monk
    Commented Jul 19, 2011 at 15:56

Not the answer you're looking for? Browse other questions tagged or ask your own question.