.book-container {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 600px;
}
@keyframes initAnimation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-30deg);
  }
}
.book {
  width: 170px;
  height: 260px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-30deg);
  transition: 1s ease;
  animation: 1s ease 0s 1 initAnimation;

 &:hover {
  transform: rotateY(0deg);
  }

  > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    background-color: red;
    width: 170px;
    height: 260px;
    transform: translateZ(25px);
    background-color: #01060f;
    border-radius: 0 2px 2px 0;
    box-shadow: 5px 5px 10px #666;
  }
  &::before {
    position: absolute;
    content: ' ';
    background-color: blue;
    left: 0;
    top: 3px;
    width: 48px;
    height: 254px;
    transform: translateX(142px) rotateY(90deg);
    background: linear-gradient(90deg, 
      #fff 0%,
      #f9f9f9 5%,
      #fff 10%,
      #f9f9f9 15%,
      #fff 20%,
      #f9f9f9 25%,
      #fff 30%,
      #f9f9f9 35%,
      #fff 40%,
      #f9f9f9 45%,
      #fff 50%,
      #f9f9f9 55%,
      #fff 60%,
      #f9f9f9 65%,
      #fff 70%,
      #f9f9f9 75%,
      #fff 80%,
      #f9f9f9 85%,
      #fff 90%,
      #f9f9f9 95%,
      #fff 100%
      );
  }

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    content: ' ';
    width: 170px;
    height: 260px;
    transform: translateZ(-25px);
    background-color: #01060f;
    border-radius: 0 2px 2px 0;
    box-shadow: -10px 0 30px 10px #666;
  }
}
#container {
  display: flex;
  flex-flow: row wrap;
  padding: 0 5px 0px 5px;
  div .book {
    top: 15px;
    left: 15px;
  }
  section {
    width: 222px;
    height: 331px;
    margin: 10px;
    transform-style: preserve-3d;
    overflow: hidden;
    position: relative;
    transition: all 0.55s ease;
    transform-style: preserve-3d;
    .jv {
      width: 444px;
      height: 662px;
      transition: all 0.55s ease;
      background: linear-gradient( to top right, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0.5) 70%);
      background-position: 0 -100px;
      &:hover {
        background-position: -100px 0px;
        transition: all 1s ease;
      }
    }
    &:hover {
      transform: scale(1.02) perspective(800px) rotateX(5deg);
    }
  }
}
@keyframes shine {
  to {
    opacity: 1;
    bottom: -30%;
    right: 150%;
  }
}