JSFiddle - React, Tailwind, and code Playground

by jklm313

HTML

<script src="https://dl.dropboxusercontent.com/u/32750720/works/common%20resources/prefixfree.min.js"></script>
<div class='book'>
  
  <!--div id='nav-next' class='page-1'>Next</div>
  <div id='nav-prev' class='page-null'>Prev</div-->
  
  <div id='page-1' class='page no-anim'>    
    <div class='side-1' id='p1'>
      <div class='content'>
        <h1>The Pilgrim's Path</h1>
        <p>
          The pilgrim must visit each of the Shrines of the Seven Graces. At each site the pilgrim must stand before the three-sided stone triolith and read the inscription. To ease the pilgrim's task, the Temple has made this list of shrines along with directions and advice to pilgrims. The blessings of each shrine last at least a half day.
        </p>
      </div><!-- .content -->
    </div><!-- .side-1 -->    
    <div class='side-2' id='p2'>      
      <div class='content'>
        <h2>The Fields of Kummu: Shrine of Humility</h2>
        <p>
          Here Lord Vivec met a poor farmer whose guar had died. The farmer could not harvest his muck without his guar, and he could not provide for his family or his village. So the Lord Vivec removed his fine clothes and toiled in the fields like a beast of burden until the crop was harvested. It is at the Fields of Kummu we go to pray for the same humility Lord Vivec showed on that day.
        </p>
        <p>
The Fields of Kummu are west of Suran on the north shore of Lake Amaya as you head towards Pelagiad. The shrine is between two rocks, and most easily noticed while traveling east along the road. Alof's farm nearby has a small dock on the north bank of Lake Amaya. This is the only dock nearby which Alof kindly allows servants of the Temple to use. It is customary to leave a portion of muck at the shrine to represent Vivec's humility.
        </p>
      </div><!-- .content -->
    </div><!-- .side-2 -->
  </div><!-- .page -->
  
  <div id='page-2' class='page no-anim'>    
    <div class='side-1' id='p3'>
      <div...

CSS

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

html, body {
  height: 100%;
  }

::-webkit-scrollbar {width:12px}
::-webkit-scrollbar-thumb {background: #222;}
::-webkit-scrollbar-track {background: transparent}

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

body {
  background-image:
    linear-gradient(
      65deg,
      indianred,
      dodgerblue
      );
  
  perspective: 60em;/*in your face*/
  }

.book {
  height: 500px;
  width: 600px;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  margin: auto;
  
  border: 10px solid pink;
  
  transform:
    rotate X(55deg);
  }

.page {
  height: 100%;
  width: 50%;
  border: 10px solid white;
  position: absolute;
  top: 0; right: 0;
  transform-origin: 0 50%;
  transition: .6s;
  animation: unflip .3s linear;
  }
  [class*='side'] {
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: violet;
    backface-visibility: hidden;
    overflow: auto;
    }
  .side-1 {
    z-index: 2;
    }
  .side-2 {
    background-color: lightgreen;
    transform:
      rotateY(180deg);
    }
/* first-top last-bottom stack order */
#page-1 {
  z-index: 4;
  }
#page-2 {
  z-index: 3;
  }
#page-3 {
  z-index: 2;
  }
#page-4 {
  z-index: 1;
  }
body.flipped-1 #page-1,
body.flipped-2 #page-2,
body.flipped-3 #page-3,
body.flipped-4 #page-4 {
  animation: flip .3s linear;
  animation-fill-mode: forwards;
  }
  /* reverse z-stack order */
  body.flipped-1 #page-1 {
    z-index: 1;
    }
  body.flipped-2 #page-2 {
    z-index: 2;
    }
  body.flipped-3 #page-3 {
    z-index: 3;
    }
  body.flipped-4 #page-4 {
    z-index: 4;
    }
  
.no-anim {
  animation: none;/* disable animation when page loads */
  }
@keyframes flip {
  to {
    transform:
      rotateY(-180deg);    
    }
  }
@keyframes unflip {
  from {
    transform:
      rotateY(-180deg);    
    }
  to {
    transform:
      rotateY(0deg);    
    }
 ...

JavaScript

$('.page:first-of-type').click(function() {
    $('body').toggleClass('flipped-1');
    $(this).removeClass('no-anim');
});
$('.page:nth-of-type(2)').click(function() {
    $('body').toggleClass('flipped-2');
    $(this).removeClass('no-anim');
});
$('.page:nth-of-type(3)').click(function() {
    $('body').toggleClass('flipped-3');
    $(this).removeClass('no-anim');
});
$('.page:last-of-type').click(function() {
    $('body').toggleClass('flipped-4');
    $(this).removeClass('no-anim');
});