* {
  margin: 0;
  padding: 0;
  border: 0;
}
.main {
  width: 100%;
  perspective: 1000;
}
#cubic {
  width: 400px;
  height: 400px;
  margin: 15% auto;
  position: relative;
  animation: cubic 5s linear;
  transform-style: preserve-3d;
}
@keyframes cubic {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  20% {
    transform: rotateX(72deg) rotateY(-72deg);
  }
  40% {
    transform: rotateX(144deg) rotateY(-72deg);
  }
  60% {
    transform: rotateX(216deg) rotateY(200deg);
  }
  80% {
    transform: rotateX(288deg) rotateY(290deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.side {
  padding: 200px;
  position: absolute;
  border-radius: 40px;
  background-image: linear-gradient(
    to bottom right,
    rgb(208, 199, 207),
    rgb(132, 132, 140)
  );
}

#side6 {
  transform: rotateX(0deg) translateZ(200px);
}
#side3 {
  transform: rotateX(180deg) translateZ(200px);
}
#side5 {
  transform: rotateX(90deg) translateZ(200px);
}
#side2 {
  transform: rotateX(-90deg) translateZ(200px);
}
#side4 {
  transform: rotateY(90deg) translateZ(200px);
}
#side1 {
  transform: rotateY(-90deg) translateZ(200px);
}