JSFiddle - React, Tailwind, and code Playground

by juvian

HTML

<script src="https://dl.dropboxusercontent.com/u/32750720/works/common%20resources/prefixfree.min.js"></script>
<div class='book'>  
  <div id='page-1' class='page no-anim'>    
    <div class='side-1' id='p1'>
        <h1>One</h1>
    </div><!-- .side-1 -->    
    <div class='side-2' id='p2'>
        <h2>two</h2>      
    </div><!-- .side-2 -->
  </div><!-- .page -->
  
  <div id='page-2' class='page no-anim'>    
    <div class='side-1' id='p3'>
        <h2>three</h2>
    </div><!-- .side-1 -->    
    <div class='side-2' id='p4'> 
        <h2>four</h2>
    </div><!-- .side-2 -->
  </div><!-- #page-2 -->
  
  <div id='page-3' class='page no-anim'>    
    <div class='side-1' id='p5'>
        <h2>six</h2>
    </div><!-- .side-1 -->    
    <div class='side-2' id='p6'>   
        <h2>seven</h2> 
    </div><!-- .side-2 -->
  </div><!-- #page-3 -->
  
  <div id='page-4' class='page no-anim'>    
    <div class='side-1' id='p7'>
        <h2>eight</h2>
    </div><!-- .side-1 -->    
    <div class='side-2' id='p8'>  
        <h2>nine</h2>
    </div><!-- .side-2 -->
  </div><!-- #page-4 -->
</div>

CSS

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  }

body * {
  transform-style: preserve-3d; /* am i doing this wrong? */
  }

body {
  color: #222;
  perspective: 70em;
  }

h1, p {
  margin: 5% 0;
  }

.book {
  height: 80%;
  max-height: 500px;
  min-height: 300px;
  width: 600px;
    background-color: #999;
  margin: auto;
  }

.page {
  height: 100%; width: 50%;
  position: absolute; top: 0; right: 0;
  transform-origin: 0 50%;
  transition: .6s;
  }
  [class*='side'] {
    height: 100%; width: 100%;
    position: absolute;
    background-color: hsl(35,50%,70%);
    backface-visibility: hidden;
    }
  .side-1 {
      z-index: 2;
    }
  .side-2 {
    transform:
      rotateY(180deg);
    }
  .flipped > [class*='side'] {
    pointer-events: auto;
    }
.flipped {
  transform:
    rotateY(-180deg);
  pointer-events: none;
  }

.page:after {
  width: 100px;  height: 50px;
  background-color: #555;
  position: absolute;  top: 0; bottom: 0; right: -100px;
  margin: auto;
  color: white;
  line-height: 50px;
  text-align: center;
  content: 'next-page';
  }
  .page.flipped:after {
    content: 'prev-page';
    transform:
      rotateY(180deg);
    pointer-events: auto;
    }

JavaScript

$('.page').click(function() {
    $(this).removeClass('no-anim').toggleClass('flipped');
   $('.page > div').click(function(e) {
        e.stopPropagation();
   });
 reorder()   
});
function reorder(){
   $(".book").each(function(){
    var pages=$(this).find(".page")
    var pages_flipped=$(this).find(".flipped")
    pages.each(function(i){
        $(this).css("z-index",pages.length-i)
    })
    pages_flipped.each(function(i){
        $(this).css("z-index",i+1)
    })
   });    
}
 reorder()