title: CSS3 rotateY without transitions applied
body: <p>I'm looking for a simple way to take an object and transform its rotateY property without it animating to its pre-set transition. <a href="http://3stepsforward.org.uk/html5/3d-slideshow/" rel="nofollow">This will help me complete this slide show</a> (ONLY VIEW IN CHROME OR SAFARI (WEBKIT))</p>
  
  <p>Here's a breakdown example of the effect:</p>
  
  <p><strong>CSS</strong> - Transition is set to 5s</p>
  
  <p><strong>Phase1</strong></p>
  
  <p><em>Element1</em> - rotateY:0;</p>
  
  <p><em>Element2</em> - rotateY:-180;</p>
  
  <p><strong>User</strong> - clicks button</p>
  
  <p><strong>Phase2</strong></p>
  
  <p><em>Element1</em> - rotateY:180;</p>
  
  <p><em>Element2</em> - rotateY:0;</p>
  
  <p><strong>Phase3</strong></p>
  
  <p><em>Element1</em> - rotateY:-180;</p>
  
  <p><em>Element2</em> - rotateY:0;</p>
  
  <p><strong>User</strong> - clicks button</p>
  
  <p><strong>Phase4</strong></p>
  
  <p><em>Element1</em> - rotateY:0;</p>
  
  <p><em>Element2</em> - rotateY:180;</p>
  
  <p>After first transition (phase1 &amp; 2) completes the rotateY value of <em>Element1</em> needs to be set to -180 without a transition so that it's in the position <em>Element2</em> 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;</p>
  
  <p>I'd like to do a jsFiddle but I really haven't time right now on this project.</p>
  
  <p><strong>I need a solution that simply takes the object from point a to b without any animation/transition</strong></p>
  
  <p>Hope that all makes sense</p>