CSS3 Book

css3book.html

<div id="css3book">
  <div class="book-host">
    <div class="book">
      <div class="dummy">
        <div class="book-cover"></div>
        <div class="dummy-page" id="dummy-page0"></div>
        <div class="dummy-page" id="dummy-page1"></div>
        <div class="dummy-page" id="dummy-page2"></div>
        <div class="dummy-page" id="dummy-page3"></div>
        <div class="dummy-page" id="dummy-page4"></div>
      </div>

      <div class="title-page"> Title </div>

      <div class="page even">
        <div style="position:relative">
          page
        </div>
      </div>
      <div class="page odd">
        <div style="position:relative">
          page
        </div>
      </div>
      <div class="page even">
        <div style="position:relative">
          page
        </div>
      </div>
      <div class="page odd">
        <div style="position:relative">
          page
        </div>
      </div>

      <div class="end-page"> End </div>

    </div>
  </div>
</div>

css3book.js.coffee

class CSS3Book
  constructor: () ->
    # unless $.browser.webkit
    #   $('.book-host').css
    #      display: 'none'

    @rotX = '5deg'
    pageEven = '.page.even'
    pageOdd = '.page.odd'

    $('html').on 'click', (e) ->
      console.log e.target

    $(pageEven).first().css
      'z-index': 100
      'WebkitTransform': "rotateX(#{@rotX}) translate3d(0,0,1px)"

    $("#{pageOdd}").css
      'WebkitTransform': "rotateX(#{@rotX}) rotateY(-180deg) translate3d(0,0,0px)"

    $("#{pageEven}:not(:first)").css
      'WebkitTransform': "rotateX(#{@rotX}) rotateY(0deg) translate3d(0,0,0px)"


    $(pageEven).click (e) ->
      $this_ = $(@)
      $prevOdd_ = $(@).prev(pageOdd)
      $nextOdd_ = $(@).next(pageOdd)
      $nextEven_ = $nextOdd_.next(pageEven)

      $this_.css
        WebkitAnimationName: 'even-next'
      $prevOdd_.css
        WebkitAnimationName: 'odd-out'
      $nextOdd_.css
        WebkitAnimationName: 'odd-next'
      $nextEven_.css
        WebkitAnimationName: 'even-in'


    $(pageOdd).click (e) ->
      $this_ = $(@)
      $prevEven_ = $(@).prev(pageEven)
      $prevOdd_ = $prevEven_.prev(pageOdd)
      $nextEven_ = $(@).next(pageEven)

      $this_.css
        WebkitAnimationName: 'odd-prev'
      $prevEven_.css
        WebkitAnimationName: 'even-prev'
      $prevOdd_.css
        WebkitAnimationName: 'odd-in'
      $nextEven_.css
        WebkitAnimationName: 'even-out'

$ ->
  if document.getElementById('css3book')?
    book = new CSS3Book()

gistfile1.scss

// This is ".less" file, not ".scss", using Twitter's Bootstrap variables. 

body {
  // CSS3 BOOK
  #css3book {
	  font-family:Georgia, "Times New Roman", Times, serif;
    line-height: 1.5;
    
    @rotX: 5deg;
    @-webkit-keyframes odd-prev {
      0% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,1px);
        z-index: 100;
      }
      100% {
        -webkit-transform: rotateX(@rotX) rotateY(180deg) translate3d(0,0,0);
        z-index: 0;
      }
    }
    @-webkit-keyframes odd-next {
      0% {
        -webkit-transform: rotateX(@rotX) rotateY(180deg) translate3d(0,0,0);
        z-index: 10;
      }
      100% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,1px);
        z-index: 100;
      }
    }
    @-webkit-keyframes odd-in {
      0% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,0);
        z-index: 0;
      }
      100% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,1px);
        z-index: 100;
      }
    }
    @-webkit-keyframes odd-out {
      0% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,1px);
        z-index: 10;
      }
      100% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,0);
        z-index: 0;
      }
    }

    @-webkit-keyframes even-prev {
      0% {
        -webkit-transform: rotateX(@rotX) rotateY(-180deg) translate3d(0,0,0);
        z-index: 0;
      }
      100% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,1px);
        z-index: 100;
      }
    }
    @-webkit-keyframes even-next {
      0% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,1px);
        z-index: 100;
      }
      100% {
        -webkit-transform: rotateX(@rotX) rotateY(-180deg) translate3d(0,0,0);
        z-index: 0;
      }
    }
    @-webkit-keyframes even-in {
      0% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,0);
        z-index: 0;
      }
      100% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,1px);
        z-index: 100;
      }
    }
    @-webkit-keyframes even-out {
      0% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,1px);
        z-index: 10;
      }
      100% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,0);
        z-index: 10;
      }
    }
  
    padding-top: 20px;
    .book-host {
      -webkit-perspective: 1200;
      width: 800px;
      height: 500px;
      
      .book {
        .book-cover {
          -webkit-transform-style: preserve-3d;
          position: absolute;
          background-image: -webkit-linear-gradient(top, #ddd, #c78b33);
          -webkit-transform: rotateX(@rotX) translate3d(-25px, 4px, -2px);
          width: 850px;
          height: 500px;
          z-index: -2;
        }

        .dummy-page {
          .box-sizing(border-box);
          -webkit-transform-style: preserve-3d;
          position: absolute;
          background-color: @white;
          -webkit-transform: rotateX(@rotX);
          @shadowsize: 0 0 50px fade(#999,10%) inset,0 0 1px 1px fade(#555,50%);
          .box-shadow(@shadowsize);
          z-index: -1;          
          &#dummy-page0 {
            width: 840px;
            height: 496px;
            -webkit-transform: rotateX(@rotX) translate3d(-20px, 4px, -1.5px);
          }
          &#dummy-page1 {
            width: 830px;
            height: 497px;
            -webkit-transform: rotateX(@rotX) translate3d(-15px, 3px, -1.4px);
          }
          &#dummy-page2 {
            width: 820px;
            height: 498px;
            -webkit-transform: rotateX(@rotX) translate3d(-10px, 2px, -1.3px);
          }
          &#dummy-page3 {
            width: 810px;
            height: 499px;
            -webkit-transform: rotateX(@rotX) translate3d(-5px, 1px, -1.2px);
          }
          &#dummy-page4 {
            width: 800px;
            height: 500px;
            -webkit-transform: rotateX(@rotX) translate3d(0px, -1px, -1.1px);
          }
        }
        .title-page {
          .box-sizing(border-box);
          -webkit-transform-style: preserve-3d;
          width: 400px;
          height: 500px;
          padding: 20px;
          position: absolute;
          top: 0;
          -webkit-transform: rotateX(@rotX) translate3d(0px, 0px, 0px);
          background-color: @white;
          @shadowsize: -50px 0px 50px fade(#333,10%) inset;
          .box-shadow(@shadowsize);
          padding: 200px 40px 0 30px;
        }
        .end-page {
          .box-sizing(border-box);
          -webkit-transform-style: preserve-3d;
          width: 400px;
          height: 500px;
          padding: 30px;
          position: absolute;
          top: 0;
          left: 400px;
          -webkit-transform: rotateX(@rotX) translate3d(0px, 0px, 0px);
          @shadowsize: 50px -0px 50px fade(#333,10%) inset;
          .box-shadow(@shadowsize);
        }

        .page {
          .box-sizing(border-box);
          -webkit-transform-style: preserve-3d;
          -webkit-animation-duration: 1s;
          -webkit-animation-iteration-count: 1;
          -webkit-animation-timing-function: ease-out;
          -webkit-animation-fill-mode: both;
          -webkit-backface-visibility: visible;
          width: 400px;
          height: 500px;
          padding: 20px;
          position: absolute;
          top: 0;
          background-color: @white;
          color: @black;
          
          &:hover {
            cursor: pointer;
          }
          
          &.odd {
            padding-right: 40px;
            @shadowsize: -50px -0px 50px fade(#333,10%) inset, 0px 0 0px 0px fade(#333,50%);
            .box-shadow(@shadowsize);
            -webkit-transform-origin: right center 0;
          }
          &.even {
            padding-left: 40px;
            @shadowsize: 50px -0px 50px fade(#333,10%) inset, -1px 0px -1px 1px fade(#666,50%);
            .box-shadow(@shadowsize);
            -webkit-transform-origin: left center 0;

            left: 400px;
          }
          > div {
            height: 100%;
          }
          .pageNum {
            position: absolute;
            bottom: -10px;
            width: 100%;
            text-align: center;
          }
        }
      }
    }
  }
}