JSFiddle - React, Tailwind, and code Playground

by sutherland

HTML

<div id="book1" class="book">
      <img src="http://srobbin.com/wp-content/uploads/2012/05/book.jpg" />
    <span class="title-page"></span>
</div>

CSS

.book {
  position: relative;
  display: inline-block;
  -webkit-transform: perspective(100) rotateY(-3deg);
  margin: 50px;
}

.book img {
  position: relative;
  max-width: 100%;
  vertical-align: middle;
  -webkit-transition: all 1s ease-in-out;
  -webkit-transform-origin: 0% 50%;
}

.book span {
    position: absolute;
    top: 1%;
    left: 0;
    width: 100%;
    height: 98%;
    z-index: -1;
    background: white;
}

.book:hover img {
    -webkit-transform: rotateY(-30deg);
}

/* Webkit Only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .book:before,
  .book:after {
    position: absolute;
    top: 2%;
    height: 96%;
    content: ' ';
    z-index: -1;
  }

  .book:before {
    width: 105.5%;
    left: 2%;
    background-color: #5a2d18;
    box-shadow: 5px 5px 20px #333;
  }

  .book:after {
    width: 5%;
    left: 100%;
    background-color: #EFEFEF;
    box-shadow: inset 0px 0px 5px #aaa;
    -webkit-transform: perspective(100) rotateY(20deg);
  }
}