Home/ Questions/Q 7886477
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T05:19:41+00:00

I’m having difficulty rotating an item a full 360 degrees in webkit using CSS

  • 0

I’m having difficulty rotating an item a full 360 degrees in webkit using CSS transitions.

I’ve created a JS Fiddle to show what I’m trying to do: http://jsfiddle.net/russelluresti/PnTk8/2/

The transition should happen in 2 steps. First, the item should just rotate along the Y axis for a 1/2 turn. Then, once that transition is complete, it should rotate the opposite direction a full turn and scale down to 1/2 the original size. The problem I’m having is that the second transition is only scaling and not rotating, even though rotate values of rotateY(-360deg) and rotateY(0deg) should cause a full rotation.

This is just a proof-of-concept, so I’m only targeting webkit at the moment. However, I’d like to stick with transitions, and not keyframe animations. Any ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In my knowledge, rotate from rotateY(-180deg) to rotateY(-360deg) would be as the same state as rotateY(0). Let’s put it this way: imagine you flip a piece of paper twice in the same direction, would be totally the same state as the very beginning. As a result, the browser take it for ‘no changes at all’, therefore no transition upon the rotation.

    another example would make this even clearer:

    given deg. set to your case, rotateY(-90deg) => rotateY(-300deg) => rotateY(60deg) would work just the same, the second transition won’t start. Becuz relative to the original state: rotateY(0), rotateY(-300deg) is just at the same state as rotateY(60deg).

    • 0