title: jquery how to do a flip effect?
body: <p>i am trying to mimic an effect found usually on mobile devices where you have a panel and when u click a button it spins around and on the other side it has some other info.</p>
  
  <p>i found some code that usses css transitions and <a href="http://jsfiddle.net/patrioticcow/ZV5XC/1/">here is an example</a></p>
  
  <p>the js</p>
  
  <pre><code>$('#signup').on('click', function(e) {
      e.preventDefault();
      document.getElementById( 'side-2' ).className = 'flip flip-side-1';
      document.getElementById( 'side-1' ).className = 'flip flip-side-2';
  
  });
  
  $('#create').on('click', function(e) {
      e.preventDefault();
      document.getElementById( 'side-2' ).className = 'flip';
      document.getElementById( 'side-1' ).className = 'flip';
  
  });
  </code></pre>
  
  <p>the issue with this example is that if i convert javascript into jquery it stopps working:</p>
  
  <p>from:</p>
  
  <pre><code> document.getElementById( 'side-2' ).className = 'flip flip-side-1';
  </code></pre>
  
  <p>to</p>
  
  <pre><code>$( '#side-2' ).addClass('flip flip-side-1');
  </code></pre>
  
  <p>Also im not sure if there isn't already a jquery plugin that does this in a better way. </p>
  
  <p>Any ideas?</p>
  
  <p>some more code.
  html</p>
  
  <pre><code>&lt;div id="side-1" class="flip"&gt;
      &lt;a id="signup" href="#"&gt;sign up&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="side-2" class="flip"&gt;
      &lt;a id="create" href="#"&gt;create&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.flip {
      backface-visibility:             hidden;
          -moz-backface-visibility:    hidden;
          -ms-backface-visibility:     hidden;
          -o-backface-visibility:      hidden;
          -webkit-backface-visibility: hidden;
      border: 1px solid black;
      transform-origin:             50% 50% 0px;
          -moz-transform-origin:    50% 50% 0px;
          -ms-transform-origin:     50% 50% 0px;
          -o-transform-origin:      50% 50% 0px;
          -webkit-transform-origin: 50% 50% 0px;
      transition: all 1s;
          -moz-transition:    all 1s;
          -ms-transition:     all 1s;
          -o-transition:      all 1s;
          -webkit-transition: all 1s;
  }
  
  #side-1 {
      transform:             rotateY( 0deg );
          -moz-transform:    rotateY( 0deg );
          -ms-transform:     rotateY( 0deg );
          -o-transform:      rotateY( 0deg );
          -webkit-transform: rotateY( 0deg );
  }
  
  #side-2 {
      transform:             rotateY( 180deg );
          -moz-transform:    rotateY( 180deg );
          -ms-transform:     rotateY( 180deg );
          -o-transform:      rotateY( 180deg );
          -webkit-transform: rotateY( 180deg );
  }
  
  .flip-side-1 {    
      transform:             rotateY( 0deg ) !important;
          -moz-transform:    rotateY( 0deg ) !important;
          -ms-transform:     rotateY( 0deg ) !important;
          -o-transform:      rotateY( 0deg ) !important;
          -webkit-transform: rotateY( 0deg ) !important;
  }
  
  .flip-side-2 {
      transform:             rotateY( 180deg ) !important;
          -moz-transform:    rotateY( 180deg ) !important;
          -ms-transform:     rotateY( 180deg ) !important;
          -o-transform:      rotateY( 180deg ) !important;
          -webkit-transform: rotateY( 180deg ) !important;
  }
  </code></pre>
  
  <p>​</p>