title: Flip / Rotate text upside down, in both X and Y
body: <p>Id like to easy flip a text upside down, like this page is doing: <a href="http://papertiger.com/" rel="nofollow">http://papertiger.com/</a></p>
  
  <p>I want to do this as easy as possible, using</p>
  
  <pre><code>-webkit-transition: 0s;
  -webkit-transform rotateX(180deg)
  </code></pre>
  
  <p>This is my code:
  HTML:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
      Js.init();
  });
  &lt;/script&gt;
  &lt;body&gt;
  &lt;div id="flipbox"&gt;
      &lt;p id="text"&gt;Front&lt;/p&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>var Js = {
  init: function() {
      var up=true;
      //do this every 5 seconds
      var i = window.setInterval( function(){
          up=!up;
          Js.rotate(up);
          //this will run just once after the timeout
          var j = window.setTimeout( function(){ 
              //Js.switchText(up);
          }, 1000 );
      }, 5000 );
  },
  
  rotate: function(up){
      if(up){
          $("#flipbox").removeClass('rotateDown');
          $("#flipbox").addClass('rotateUp');
      }else{
          $("#flibox").removeClass('rotateUp');
          $("#flipbox").addClass('rotateDown');
      }
  },
  
  switchText: function(up) {
      if(up){
          $("#text").text('front');
      }else{
          $("#text").text('back');
      }
  }
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#flipbox{
      color: green;
      display: block;
      font-size: 70px;
      perspective: 800px;
      perspective-origin: 50% 100px;
  }
  
  .rotateDown{
      transition: 2s;
      -webkit-transform: rotateX(180deg);
  }
  .rotateUp{
      transition: 2s;
      -webkit-transform: rotateX(0deg);
  }
  .upSideDown{
      -webkit-transition: 0s;
      -webkit-transform: rotate(180deg);
  }
  </code></pre>
  
  <p>As it is now, I get the text "First" to rotate as I want to. To switch the text and rotate it in Y 180 degrees (to make it readable, since its now upside down), does not work, and is why the line is commented.</p>
  
  <p>So, I think I need to have the text rotated by both X and Y 180 degress, how do I do that? <code>rotate3d(1,1,0,180deg)</code> does not work like that. If I write rotateX followed by rotateY, the first one gets overwritten.</p>
  
  <p>...or is the jQuery plugin flippy somthing I should look for?</p>
  
  <p>Ive tried to make a jsfiddle. It did not work, but can be found here: <a href="http://jsfiddle.net/EdNVw/" rel="nofollow">http://jsfiddle.net/EdNVw/</a></p>
  
  <p>Thanks in advace for any advice!</p>