Home/ Questions/Q 6170239
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T22:59:44+00:00

My question is whether it is possible to have 2 different CSS3 transitions operating

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0