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

  position:relative;

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

.book {
  background:#e7d6d6;
  height:280px;
  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: 280px;

  -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:#e7d6d6;
  width: 40px;
  height: 280px;
  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;
}