.perspective {
  width: 100%;
  height: 100%;
  position: relative;
  perspective: 1500px;
}

/* Modal view */
.perspective.modalview {
  position: fixed;
  -webkit-perspective: 1500px;
  /* perspective: 1500px; */
}

.modalview .wrapper {
  position: absolute;
  overflow: hidden;
  height: 100%;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Effect Rotate Left */
.perspective.modalview.animate {
  transition: background-color 1s;
  background-color: #e96e4f;
}

.perspective .wrapper::after {
  background: rgba(255, 255, 255, 0.6);
}

.perspective.animate.one .wrapper {
  /* -webkit-transform: translateZ(-1800px) translateX(-50%) rotateY(45deg); */
  transform: translateZ(-100px) translateX(10%) rotateY(9deg);
}

.perspective.animate.one.two .wrapper {
  transform: translateZ(-300px) translateX(13%) rotateY(-21deg);
}

.perspective.animate.one.two.three .wrapper {
  transform: translateZ(-618px) translateX(9%) rotateY(20deg) rotateX(-31deg);
}

.perspective.animate.one.two.three.four .wrapper {
  transform: translateZ(-2000px) translateX(13%) translateY(-30%)rotateY(21deg) rotateX(-30deg);
}

.go-rotate-x {
  animation-name: example;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  position: absolute;
}

@keyframes example {
  0% {
    transform: translateZ(-2000px) rotateY(21deg) rotateX(-30deg);
  }

  100% {
    transform: translateZ(-4000px) rotateY(41deg) rotateX(-272deg);
  }
}

.shoter-img {
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 300px;
}