title: Flip book effect behaves weird, pages falling through eachother
body: <p>I want to create a book effect, where the book will be flipped to the correct page with a 3d effect, according to the user-selected options. But as I am not really well known with 3d/transforms etc in CSS3, I've got a few issues that I'm having trouble with.</p>
  
  <p>Right now I've got the following piece of code that flips a page:</p>
  
  <pre><code>$(document).on('click','.button', function() {
      $('#configurationPreviewContainer ul:nth-of-type('+$(this).attr('data-target')+')').css('transform', 'rotateY(-180deg) perspective(3000px)');
  });
  </code></pre>
  
  <p>but see the entire html/css/JS @ codepen > <a href="http://codepen.io/anon/pen/aOrjeG" rel="nofollow">http://codepen.io/anon/pen/aOrjeG</a></p>
  
  <p>In the extended version, the user does not have to click each page individually, but for this quick/clean demo I made it that way.</p>
  
  <p><strong>There are three issues right now;</strong></p>
  
  <p>1) When you click the 'page 1' link, the front/cover of the book will flip. But the front will still show, when the page lands? It should show the back of the cover of the book</p>
  
  <p>2) The 90% rotateY is not in the center of the book, but it is a bit to the left of the book. Why is that, and how would I fix that?</p>
  
  <p>3) When you first select 'page 1', and then 'page 2', the second page will fall through the first page, rendering it invisible.</p>