How can I get all 6 sides of a 3d cube to show in react.js?

So I am creating my website portfolio where I have a 3d cube spinning in the about page that shows languages that I am familiar with and for some reason, there are only 4 sides that show when I want to show all 6 sides. The cube spins as intended but for some reason only 4 of the 6 sides are showing.

my file:

<div className="stage-cube-cont">
                    <div className="cubespinner">
                        <div className="face1">
                            <FontAwesomeIcon icon={faPython} color="#DD0031" />
                        </div>
                        <div className="face2">
                            <FontAwesomeIcon icon={faHtml5} color="#F06529" />
                        </div>
                        <div className="face3">
                            <FontAwesomeIcon icon={faCss3} color="#28A4D9" />
                        </div>
                        <div className="face4">
                            <FontAwesomeIcon icon={faGitAlt} color="#EC4D28" />
                        </div>
                        <div className="face5">
                            <FontAwesomeIcon icon={faJsSquare} color="#dd700" />
                        </div>
                        <div className="face6">
                            <FontAwesomeIcon icon={faReact} color="#5ED4F4" />
                        </div>
                    </div>
</div>

The CSS file:

.cubespinner {
    animation-name: spincube;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 12s;
    transform-style: preserve-3d;
    transform-origin: 100px 100px 0;
    margin-left: calc(50% - 100px);
  
    div {
      position: absolute;
      width: 200px;
      height: 200px;
      border: 1px solid #ccc;
      background: rgba(255, 255, 255, 0.4);
      text-align: center;
      font-size: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 20px 0px lightyellow;
    }
  
    .face1 {
      transform: translateZ(100px);
      color: #dd0031;
    }
    .face2 {
      transform: rotateY(90deg) translateZ(100px);
      color: #f06529;
    }
    .face3 {
      transform: rotateY(90deg) rotateX(90deg) translateZ(100px);
      color: #28a4d9;
    }
    .face4 {
      transform: rotateY(180deg) rotateZ(90deg) translateZ(100px);
      color: #5ed4f4;
    }
    .face5 {
      transform: rotateY(-90deg) rotateZ(90deg) translateZ(100px);
      color: #efd81d;
    }
    .face6 {
      transform: rotateX(-90deg) translateZ(100px);
      color: #ec4d28;
    }
  }
  
  @keyframes spincube {
    from,
    to {
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    16% {
      transform: rotateY(-90deg);
    }
    33% {
      transform: rotateY(-90deg) rotateZ(90deg);
    }
    50% {
      transform: rotateY(-180deg) rotateZ(90deg);
    }
    66% {
      transform: rotateY(-270deg) rotateX(90deg);
    }
    83% {
      transform: rotateX(90deg);
    }
  }

Any help is much appreciated!

Your animation works for me on Chrome and Firefox although it gets janky after the 4th face, and different depending on the browser: https://stackblitz.com/edit/react-ts-15jx1h?file=style.scss

If you apply transformations in different orders between keyframes, you leave it up to the browser to interpolate the correct transformation between each keyframe. This can cause some extra spinning in random directions, even though the final state is the same.

To make it consistent I'd suggest copy / pasting the previous keyframe's transformation into the next, and just adding an additional 90 degree turn to each.

@keyframes spincube {
  16% {
    transform: rotateY(-90deg);
  }
  33% {
    transform: rotateY(-90deg) rotateZ(90deg);
  }
  50% {
    transform: rotateY(-90deg) rotateZ(90deg) rotateX(-90deg);
  }
  66% {
    transform: rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg);
  }
  83% {
    transform: rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg)
      rotateZ(90deg);
  }
  100% {
    transform: rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg)
      rotateZ(90deg) rotateX(-90deg);
  }
}

Fixed version: https://stackblitz.com/edit/react-ts-zbpcx2?file=style.scss