3D CSS Cover

Test

by Rubbel De Katz

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="books">
  <div id="book1" class="book">
    <img src="https://www.gmeiner-verlag.de/images/verlag/cover/mittel/9783839225332.jpg" />
  </div>
  <div id="book2" class="book">
    <img src="https://www.gmeiner-verlag.de/images/verlag/cover/mittel/9783839214473.jpg" />
  </div>
  <div id="book3" class="book">
    <img src="https://www.gmeiner-verlag.de/images/verlag/cover/mittel/9783839223611.jpg" />
  </div>
</div>

CSS

.books {
  -moz-perspective: 100px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.book {
  display: inline-block;
  position: relative;
  -moz-perspective: 100px;
  -moz-transform: rotateY(-2deg);
  -webkit-transform: perspective(100) rotateY(-2deg);
  outline: 1px solid transparent; /* Helps smooth jagged edges in Firefox */
  box-shadow: none;
  margin: 0 30px 30px 0;
}

.book img {
  position: relative;
  max-width: 100%;
  width: auto;
  height: auto;
}

.book:before,
.book:after {
  position: absolute;
  top: 2%;
  height: 96%;
  content: ' ';
  z-index: -1;
}

.book:before {
  width: 100%;
  left: 7.5%;
  background-color: #666;
  box-shadow: 5px 5px 20px #ccc;
}

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