* {
  box-sizing:border-box;
}

body {
  margin:0;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#0f0f0f;
  perspective: 1000px;
  overflow:hidden;
}

.container {
  position:relative;
  width:450px;
  height:800px;
  transform: rotateY(0deg) rotateX(0deg) scale(0.5); 
  transform-style: preserve-3d;
  animation:30s flipme linear infinite;
  transition:transform 300ms ease;
  transform-origin:50% 50%;
}

.shrinkwrap {
/*   transform:scale(0.5); */
}

.container:hover {
  transform: rotateY(30deg) rotateX(5deg);
  cursor:pointer;
}

@keyframes flipme {
  0% {
    transform: rotateY(-30deg) rotateX(0deg);
  }
  50% {
    transform: rotateY(0deg) rotateX(10deg);
  }
  100% {
    transform: rotateY(-30deg) rotateX(0deg);
  }
   
}

.container>img {
  position:absolute;
}

.container>img:nth-of-type(1) {
  clip-path: polygon(0 0, 0 200px, 200px 0);
  transform: translateZ(50px);
}

.container>img:nth-of-type(2) {
  clip-path: polygon(250px 0%, 100% 0, 100% 550px, 150px 100%, 0 100%, 0% 250px);
}

.container>img:nth-of-type(3) {
  clip-path: polygon(100% 600px, 200px 100%, 100% 100%);
  transform: translateZ(-50px);
}