CSS3 rotateY without transitions applied

Question

I'm looking for a simple way to take an object and transform its rotateY property without it animating to its pre-set transition. This will help me complete this slide show (ONLY VIEW IN CHROME OR SAFARI (WEBKIT))

Here's a breakdown example of the effect:

CSS - Transition is set to 5s

Phase1

Element1 - rotateY:0;

Element2 - rotateY:-180;

User - clicks button

Phase2

Element1 - rotateY:180;

Element2 - rotateY:0;

Phase3

Element1 - rotateY:-180;

Element2 - rotateY:0;

User - clicks button

Phase4

Element1 - rotateY:0;

Element2 - rotateY:180;

After first transition (phase1 & 2) completes the rotateY value of Element1 needs to be set to -180 without a transition so that it's in the position Element2 was in in Phase1. With this the animation will make the elements appear to spin around one another as you can see on the example link I have supplied. Unfortunately the effect ceases after all elements have their rotateY:180;

I'd like to do a jsFiddle but I really haven't time right now on this project.

I need a solution that simply takes the object from point a to b without any animation/transition

Hope that all makes sense

Answer 1

Alternatively you can do one thing, creates two classes:

.enable{ -webkit-transform : rotateY(180deg); -webkit-transition : 10s; }
.disable{ -webkit-transform : rotateY(0deg); -webkit-transition : 0; }

and checks the class you want the event.

Answer 2

If you are trying to rotate an object without a transition, then you should not be setting a transition at all. Only set the transform:

$(this).css('-webkit-transform','rotateY(180deg)');

$(this).css('-webkit-transform','rotateY(0)');

Live example to show no transition when rotated: http://jsfiddle.net/2XU7D/4/