title: CSS Flipping Page Effect
body: <p>I'm building an web application with effect similar to FlipBoard.</p>
  
  <p>At first, I was trying to use <a href="http://tympanus.net/Development/FlipboardPageLayout/" rel="nofollow">this open source</a>. But I don't really like the way it's implemented (create duplicates for each page and overlap each other when rotate)... plus, when I add dynamic content inside each page, the flipping effect becomes very shaky...</p>
  
  <p>So now I'm implementing my own flipping effect with css and javascript..</p>
  
  <p>The page structure is like this</p>
  
  <pre><code>&lt;div class="page" id="page1"&gt;
      &lt;div class="inner"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="page" id="page2"&gt;
      &lt;div class="inner"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When the flipping is triggered... I did the following... BUT I find it not elegant because <strong>its supposed to be a smooth 180 rotation rather than breaking the action into two..</strong> the problem I have is the z-index.. after rotating -90deg, I want the "back" page to show on top otherwise it will be always the "front" side...</p>
  
  <pre><code>    var front = '&lt;div class="front" style="clip: rect(0px, 2229px, 1315px, 1115px);"&gt;' + $('#page2').children('.megafolio-container').html() + '&lt;/div&gt;';
      var back = '&lt;div class="back megafolio-container" style="clip: rect(0px, 2229px, 1315px, 1115px);"&gt;' + $('#page3').children('.megafolio-container').html() + '&lt;/div&gt;';
      var middle = '&lt;div class="middle page"&gt;&lt;/div&gt;';
      $('.container').append(middle);
      $('.middle').html(front + back);
      $('.middle').height($(window).height());
      $('.middle').width($(window).width());
      $('.middle').css('-webkit-transform', 'rotateY(-90deg)');
      $('.middle').css('-webkit-transition', '-webkit-transform 500ms linear');
      setTimeout(function(){
          $('.middle &gt; .back').css('z-index', 10);
          $('.middle').css('-webkit-transform', 'rotateY(-180deg)');
          $('.middle').css('-webkit-transition', '-webkit-transform 500ms linear');
      }, 500);
  </code></pre>