.itemsWrapper {
  width: 100%;
  height: 300px;
  position: relative;


}


.item0, .item1, .item2 {
  border: 5px solid rgba(100,100,100,1);
  box-sizing: border-box;
}

.item0 {
  width: 100%;
  height: 100%;

  margin-right: auto;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;

     transform: translate3d(0, 0, -200px)
               rotateX(0deg)
               rotateY(0deg)
               rotateZ(0deg)
               scale(1);

  animation: smoothRotate 15s ease-in-out infinite;
}


.item1,
.item2 {
  position: absolute;
  inset: 0;
}

.item1 {
  transform: translate3d(0, 0, 25px);
  width: 50%;
  height: 50%;
}

.item2 {
  transform: translate3d(0px, 0px, 50px);
  width: 20%;
  height: 20%;
}


@keyframes smoothRotate {
  0% {
    transform: translate3d(0, 0, -200px)
               rotateX(0deg)
               rotateY(0deg)
               rotateZ(0deg)
               scale(1);
  }

  25% {
    transform: translate3d(0, 0, -200px)
               rotateX(20deg)
               rotateY(40deg)
               rotateZ(-20deg)
               scale(0.5);
  }

  50% {
    transform: translate3d(0, 0, -200px)
               rotateX(0deg)
               rotateY(70deg)
               rotateZ(0deg)
               scale(0.3);
  }

  75% {
    transform: translate3d(0, 0, -200px)
               rotateX(20deg)
               rotateY(40deg)
               rotateZ(20deg)
               scale(.5);
  }

  100% {
    transform: translate3d(0, 0, -200px)
               rotateX(0deg)
               rotateY(0deg) /* keeps it looping smoothly */
               rotateZ(0deg)
               scale(1);
  }
}