title: make css3 transition rotate always in the same direction
body: <p>I am trying to have a front-/backside div flipping always in the same direction. I implemented the flip with css and javascript, but I have a hard time thinking about how to make it always rotate to the right, instead of rotate to the right and then coming back to the left.</p>
  
  <p>I basically use a div with the follwing css</p>
  
  <pre><code>  /* flip speed goes here */
    .flipper {
      -webkit-transition: 0.6s;
      -webkit-transform-style: preserve-3d;
  
      -moz-transition: 0.6s;
      -moz-transform-style: preserve-3d;
  
      -o-transition: 0.6s;
      -o-transform-style: preserve-3d;
  
      transition: 0.6s;
      transform-style: preserve-3d;
  
      position: relative;
      border-radius: 5px;
    -webkit-border-radius: 5px;
      padding: 5px;
      margin-left: 3px;
      z-index: 3;
      width: 160px;
      height: 145px;
      display:block; 
    }
  </code></pre>
  
  <p>and when the user clicks on it I add the class "flipped" to the div which changes the css to this:</p>
  
  <pre><code>      /* flip the pane when hovered */
    .flip-container.flipped .flipper {
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      transform: rotateY(180deg);
    }
  </code></pre>
  
  <p>should I just increment always the rotation angle? any other ideas?</p>
  
  <p>Here is the current status and the full css in a <a href="http://jsfiddle.net/7WgKL/2/">fiddle</a></p>