CSS book layout

Book layout with any number of pages you can flip through. You can turn one page or jump couple of pages with your mouse.

by Ali Khaled

HTML

<div class="book">
  <div class='sheet'>
    <div class="front">
      <h1>
    Tovaken
    </h1>
      <h2>
    Welcome to Wholesale
    </h2>

    </div>
    <div class="back">
      <h1>
    Hello, everybody!
    </h1>
      <p>
        This is HTML+CSS+jQuery book layout. It uses jQurry, but it can be easely translated into pure JavaScript.
      </p>
    </div>
  </div>
  <div class='sheet'>
    <div class="front">
      <h2>
    Browser compatibility
    </h2>
      <p>
        It works fine in Firefox and Chrome, almost fine in IE (something's going on with 3D rotation). Didn't test it in Safari.
      </p>
    </div>
    <div class="back">
      <h2>
    jQuery
    </h2>
      <p>
        Nothing special, pretty basic stuff, I believe it can be done even simpler, suggestions are wellcome.
      </p>
    </div>
  </div>
  <div class='sheet'>
    <div class="front">
      <h2>
    CSS
    </h2>
      <p>
        Basic options, little bit of 3D transformations. You can play with perspective options as you see fit. I'm not quite sure why backface-visibility wasn't working, so please, suggest.
      </p>
    </div>
    <div class="back">
      <h3>
    Thank you, everybody, have a nice day
    </h3>
    </div>
  </div>
  <div class='sheet'>
    <div class="front">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </div>
    <div class="back">
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
      </ul>
    </div>
  </div>
  <div class='sheet'>
    <div class="front">
      <table>
        <thead>
          <tr>
            <th>Little</th>
            <th>HTML</th>
          ...

CSS

.book {
  width: 200px;
  height: 300px;
  position: relative;
  left: 300px;
  -webkit-perspective: 7000px;
  perspective: 7000px;
  -webkit-perspective-origin: 0% -165%;
  perspective-origin: 0% -165%;
}

.sheet {
  width: 100%;
  height: 100%;
  position: absolute;
  border: 1px solid lightgrey;
  cursor: pointer;
  background: white;
  -webkit-transform-origin: left;
  transform-origin: left;
}

.back {
  width: 100%;
  height: 100%;
  position: absolute;
  display: none;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.front {
  width: 100%;
  height: 100%;
  position: absolute;
}

.pagination {
  position: absolute;
  bottom: 0;
  left: 50%;
}

JavaScript

flipPageDelay = 250; //delay visibility toogle front/back of the sheet on turning sheets so it flips in the middle of turning (not 100% exact)
numberOfPages = 0;
maxSheetAngle = 35; //angle of the opened sheets
animationSpeed = 1; //in seconds
pagination = true; //page numbers on/off

$(document).ready(function() {
  initBook(); //set up click events and draw book
});

function initBook() {
  numberOfPages = $('.sheet').length;
  sheetAngle = maxSheetAngle / numberOfPages; //angle difference between two adjacent sheets
  $('.sheet').each(function(index) {

    //click event for turning pages
    $(this).click(function(event) {
      event.stopPropagation();
      if ((index === currentPage - 1) || index > currentPage) {
        goToPage(index);
      } else {
        goToPage(index + 1);
      }
    });

    //page rotation
    $(this).css("transform", "rotatey(-" + (sheetAngle * (numberOfPages - 1 - index)) + "deg)");
    $(this).css("transition", animationSpeed + "s");

    //seting up z-index manualy is necessary because although pages appear to be on top, 
    //click event respect element's z-index (+100 is just in case)
    $(this).css("z-index", numberOfPages + 100 - index);

    //append divs for pagination, it can be span or whatever..
    if (pagination) {
      $(this).children('.front').append("<div class='pagination'>" + (2 * index + 1) + "</div>");
      $(this).children('.back').append("<div class='pagination'>" + (2 * index + 2) + "</div>")
    }
  });
  currentPage = 0; //defines currently opened page
}

//handles turning of the pages
function goToPage(sheet) {
  forward = true; //direction of page turning, true=towards end, false=towards begining of the book
  start = currentPage; //first of the pages to turn
  end = sheet; //last of the pages to turn
  if (currentPage > sheet) {
    forward = false;
    start = sheet;
    end = currentPage;
  }

  //defining angle difference between two adjacent sheets on left and on right side of the book
  if...