*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background-color: #090909;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cube-wrapper {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  position: relative;
  rotate: x -30deg;
  animation: animate 4s linear infinite;
}

@keyframes animate {
  0% {
    transform: rotateY(0);
  }

  100% {
    transform: rotateY(360deg);
  }
}

.side {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    to bottom,
    hsl(200, 80%, 50%) 0%,
    hsl(200, 80%, 60%) 100%
  );
  rotate: 0 1 0 calc(var(--i) * 90deg);
  transform: translateZ(50px);
  box-shadow: inset 2px 2px 20px rgba(0, 0, 0, 0.3);
}
.side.top {
  rotate: 1 0 0 90deg;
  transform-style: preserve-3d;
}

.top::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: hsl(200 80% 60% / 0.7);
  transform: translateZ(-120px);
  filter: blur(20px);
}