<div class="cube">
                <div class="cube__face" id="cube__face--front">
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                </div>

                <div class="cube__face" id="cube__face--back">
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                </div>

                <div class="cube__face" id="cube__face--right">
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                </div>

                <div class="cube__face" id="cube__face--left">
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                </div>

                <div class="cube__face" id="cube__face--top">
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                </div>

                <div class="cube__face" id="cube__face--bottom">
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                </div>
            </div>
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body {
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color: #212121;
  font-family:arial;
}
.cube {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  animation: animate 4s linear infinite;
  cursor: pointer;
  transition: 0.5s;
}


.cube__face {
  position: absolute;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.faceBox {
  border: calc(100px / 1000) solid rgba(0, 0, 0, 0.8);
  width: calc(100px / 3);
  height: calc(100px / 3);
  opacity: 1;
}

#cube__face--front span {
  background-color: #FF4949;
}

#cube__face--right span {
  background-color: #13CE66;
}

#cube__face--left span {
  background-color: #2D8EFF;
}

#cube__face--top span {
  background-color: #FFCC3D;
}

#cube__face--bottom span {
  background-color: #fefefe;
}

#cube__face--back span {
  background-color: #f1f03e;
}

#cube__face--front {
  transform: rotateY(0deg) translateZ(calc(100px / 2));
}

#cube__face--right {
  transform: rotateY(90deg) translateZ(calc(100px / 2));
}

#cube__face--back {
  transform: rotateY(180deg) translateZ(calc(100px / 2));
}

#cube__face--left {
  transform: rotateY(-90deg) translateZ(calc(100px / 2));
}

#cube__face--top {
  transform: rotateX(90deg) translateZ(calc(100px / 2));
}

#cube__face--bottom {
  transform: rotateX(-90deg) translateZ(calc(100px / 2));
}

@keyframes animate {
  0% {
    transform: rotateX(-30deg) rotateY(0deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(-30deg) rotateY(360deg) rotateZ(360deg);
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.