.stage {
  /* The frame or lens */
  width: 244px;
  height: 400px;
  perspective: 1080px;
  margin: 5% 3%;
  position: relative;
  float: left;
  outline: 1px #f00 border;
  perspective-origin: 50% 50%;
}

.book_group {
  transform-style: preserve-3d;
  transform-origin: 50% 50% 50%;
  transform: rotateY(0deg) rotateX(0deg);
}

.book_front, .book_back {
  width: 244px;
  height: 400px;
  transform-style: preserve-3d;
  transform: rotateY(0deg) translateZ(12px);
  position: absolute;
  background: #666;
  background-position: -250% 100%, right top, center top, left top;
  background-size: 500% 200%, auto 100%, auto 100%, auto 100%;
}
.book_front-before, .book_front-after, .book_back-before, .book_back-after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  transform-origin: 0% 0%;
  width: 24px;
  height: 400px;
  background: linear-gradient(to bottom, #ededed 0%, #c8c8c8 100%);
}
.book_front-before, .book_back-before {
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 25%, rgba(0, 0, 0, 0.15) 50%, rgba(255, 255, 255, 0) 100%), url(none), url("https://cdn.switch-images-julio.com/file/switch-images-julio/_resized/A4KYA/spine.png"), url(none);
  background-position: -400% 100%, right top, center top, left top;
  background-size: 1000% 200%, auto 100%, auto 100%, auto 100%;
  transform: rotateY(-90deg) translateX(-24px);
}
.book_front-after, .book_back-after {
  transform: rotateY(90deg) translateZ(244px);
}

.book_front_trim {
  /* Trim that IMG tag to cover side -graceful*/
  height: 100%;
  position: absolute;
  width: 244px;
  overflow: auto;
}

.main-content img {
  position: absolute;
  height: 100%;
  right: 0;
  visibility: hidden;
}

.book_back {
  transform: rotateY(180deg) translateZ(12px);
  width: 244px;
  height: 400px;
  z-index: -1;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 25%, rgba(0, 0, 0, 0.15) 50%, rgba(255, 255, 255, 0) 100%), url(none), url(none), url("https://cdn.switch-images-julio.com/file/switch-images-julio/_resized/A4KYA/insert.png");
  background-size: auto 100%, auto 100%;
  background-position: top left;
}
.book_back-before {
  height: 244px;
  z-index: -1;
  background: #eee;
  transform: rotateX(90deg) rotateZ(-90deg) translateZ(-400px);
  box-shadow: 0px 0px 25px 4px rgba(0, 0, 0, 0.55);
}
.book_back-after {
  height: 244px;
  z-index: -1;
  background: #eee;
  transform: rotateX(90deg) rotateZ(-90deg);
}

.book_front {
  z-index: 1;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 25%, rgba(0, 0, 0, 0.15) 50%, rgba(255, 255, 255, 0) 100%), url("https://cdn.switch-images-julio.com/file/switch-images-julio/_resized/A4KYA/insert.png"), url(none), url(none);
  background-position: -200% 100%, right top, center top, left top;
  background-size: 200% 200%, auto 100%, auto 100%, auto 100%;
  width: 244px;
  height: 400px;
}

/* ANIMATION */
@keyframes rotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes lightingeffect {
  0% {
    background-position: -200% 100%, right top, center top, left top;
    background-size: 500% 200%, auto 100%, auto 100%, auto 100%;
  }
  25% {
    background-position: -200% 100%, right top, center top, left top;
    background-size: 500% 200%, auto 100%, auto 100%, auto 100%;
  }
  50% {
    background-position: 0% 100%, right top, center top, left top;
    background-size: 500% 200%, auto 100%, auto 100%, auto 100%;
  }
  75% {
    background-position: 200% 0, right top, center top, left top;
    background-size: 500% 200%, auto 100%, auto 100%, auto 100%;
  }
  100% {
    background-position: 200% 0, right top, center top, left top;
    background-size: 500% 200%, auto 100%, auto 100%, auto 100%;
  }
}

.stage {
  perspective-origin: 50% 50%;
}