<div class="bookWrap">
    <div class="book">
      <img class="cover" 
        src="https://s.cdpn.io/9529/dr-sleep-cover.jpg">
      <div class="spine"></div>
    </div>
  </div>

body {
  background:#fff;
}

.bookWrap {
  margin:25px auto;
  height:346px;
  width:230px;

  position:relative;

  -webkit-perspective: 1200px;
     -moz-perspective: 1200px;
          perspective: 1200px;
}

.book {
  background:#000;
  height:346px;
  width:230px;
  position:absolute;
  left:16px;
  top:0;

  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
          transform-style: preserve-3d;
  
  -webkit-transition: -webkit-transform .5s ease 0s;
     -moz-transition: -moz-transform .5s ease 0s;
          transition: transform .5s ease 0s;
  
  -webkit-border-radius: 0 7px 7px 0;
     -moz-border-radius: 0 7px 7px 0;
          border-radius: 0 7px 7px 0;
  
  -webkit-perspective: 1200px;
     -moz-perspective: 1200px;
          perspective: 1200px;
}

.bookIntro {
  -webkit-transform: rotateY(30deg);
     -moz-transform: rotateY(30deg);
          transform: rotateY(30deg);
}

.cover {
  position:absolute;
  left:0;
  top:0;

  height: 100%;
  width: 230px;

  max-width: 230px;
  max-height: 346px;

  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
          backface-visibility: hidden;

  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;

  -webkit-transition: -webkit-transform .5s ease 0s, width .5s ease 0s;
     -moz-transition: -moz-transform .5s ease 0s, width .5s ease 0s;
            transition: transform .5s ease 0s, width .5s ease 0s;

  -webkit-transform-origin: 0;
     -moz-transform-origin: 0;
          transform-origin: 0;
}

.cover:hover {  
  width:210px;
  
  -webkit-transform: rotateY(-20deg);
     -moz-transform: rotateY(-20deg);
          transform: rotateY(-20deg);
}

.spine {
  background:black;
  width: 40px;
  height: 344px;
  position: absolute;
  top: 0;
  left:0;


  -webkit-transform: rotateY(90deg);
     -moz-transform: rotateY(90deg);
          transform: rotateY(90deg);

  -webkit-transform-origin: 0;
     -moz-transform-origin: 0;
          transform-origin: 0;
}

$(document).ready(function() {

  // Pause just a moment
  setTimeout(function() {

    var $book = $('.book');

    // Apply the intro classes that will 
    // appear to turn the book,
    // revealing its spine
    $book.addClass('bookIntro');

    // pause another moment, then turn back
    setTimeout(function() {
      $book.removeClass('bookIntro');
    }, 2000);


  }, 1000);


});