@font-face {
  font-family: "Lato";
  src: url("https://assets.codepen.io/123008/Lato-Regular.ttf") format("truetype");
}
body {
  background: radial-gradient(#333, #111);
  background-size: 100vmax 100vmax;
  background-position: 50%;
  position: fixed;
}

.container {
  width: 300px;
  height: 300px;
  position: fixed;
  perspective: 1000px;
  margin: 50px auto;
}

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
}

#cube .side {
  margin: 0;
  width: 196px;
  height: 196px;
  display: block;
  position: absolute;
  border: 2px solid black;
  text-align: center;
  font: 44pt/196px "Lato", Arial, sans-serif;
  font-weight: bold;
}

#cube .front {
  transform: rotateY(0deg) translateZ(100px);
  background: linear-gradient(rgba(255, 213, 0, 0.7), rgba(255, 0, 0, 0.7));
  line-height: 88px;
}

#cube .back {
  transform: rotateX(180deg) translateZ(100px);
  background: linear-gradient(rgba(43, 255, 0, 0.7), rgba(255, 255, 0, 0.7));
}

#cube .right {
  transform: rotateY(90deg) translateZ(100px);
  background: linear-gradient(rgba(0, 255, 213, 0.7), rgba(0, 255, 0, 0.7));
}

#cube .left {
  transform: rotateY(-90deg) translateZ(100px);
  background: linear-gradient(rgba(0, 43, 255, 0.7), rgba(0, 255, 255, 0.7));
}

#cube .top {
  transform: rotateX(90deg) translateZ(100px);
  background: linear-gradient(rgba(213, 0, 255, 0.7), rgba(0, 0, 255, 0.7));
}

#cube .bottom {
  transform: rotateX(-90deg) translateZ(100px);
  background: linear-gradient(rgba(255, 0, 43, 0.7), rgba(255, 0, 255, 0.7));
}

@keyframes rotate-all {
  0% {
    transform: rotateY(0deg);
  }
  30% {
    transform: rotateX(-180deg);
  }
  45% {
    transform: rotateY(-90deg);
  }
  60% {
    transform: rotateY(90deg);
  }
  75% {
    transform: rotateX(-90deg);
  }
  90% {
    transform: rotateX(90deg);
  }
}

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  top: 300px;
}

#cube01 .side {
  margin: 0;
  width: 196px;
  height: 196px;
  display: block;
  position: absolute;
  border: 2px solid black;
  text-align: center;
  font: 44pt/196px "Lato", Arial, sans-serif;
  font-weight: bold;
}

#cube01 .front {
  transform: rotateY(0deg) translateZ(100px);
  background: linear-gradient(rgba(255, 213, 0, 0.7), rgba(255, 0, 0, 0.7));
  line-height: 88px;
}

#cube01 .back {
  transform: rotateX(180deg) translateZ(100px);
  background: linear-gradient(rgba(43, 255, 0, 0.7), rgba(255, 255, 0, 0.7));
}

#cube01 .right {
  transform: rotateY(90deg) translateZ(100px);
  background: linear-gradient(rgba(0, 255, 213, 0.7), rgba(0, 255, 0, 0.7));
}

#cube01 .left {
  transform: rotateY(-90deg) translateZ(100px);
  background: linear-gradient(rgba(0, 43, 255, 0.7), rgba(0, 255, 255, 0.7));
}

#cube01 .top {
  transform: rotateX(90deg) translateZ(100px);
  background: linear-gradient(rgba(213, 0, 255, 0.7), rgba(0, 0, 255, 0.7));
}

#cube01 .bottom {
  transform: rotateX(-90deg) translateZ(100px);
  background: linear-gradient(rgba(255, 0, 43, 0.7), rgba(255, 0, 255, 0.7));
}