Not all the sides of the 3D cube display

I'm trying to create a 3D cube using CSS but not all sides of the cube appear as they should the left , right and top sides of my cube doesn't display at all only the front , bottom and backward of the 3D cube.

I tried to change the size of the cube, and I tried to change the transform properties and to play with the angles however it didn't work any help would be amazing. here is my CSS code, I'm sorry for its length

.container {
  width: 400px;
  height: 400px;
  border: 2px solid white;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 800px;
  perspective-origin: top right;
}
.cube {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    border: 2px solid white;
    animation: cubeRotate 5s linear infinite;
}
.face {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.9;
    line-height: 100px;
    text-align: center;
    font-size: 1.4rem;
}
.front {
    background-color: lightblue;
    transform: translateZ(100px);
}
.backward {
    background-color: lightgreen;
    transform: translateZ(-100px);
}
.left {
    background-color: peru;
    transform: rotateY('-90deg') translateZ(-100px);
}
.right {
    background-color: blueviolet;
    transform: rotateY('90deg') translateZ(100px) ;
}
.top {
    background-color: brown;
    transform: rotateX('90deg') translateZ(100px);
}
.bottom {
    background-color: aqua;
    transform: translateZ(100px) rotateX('-90deg');
}
@keyframes cubeRotate {
  from {
    transform: rotateY(0deg) 
}
  to { 
    transform: rotateY(360deg) 
}
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="cube">
            <div class="face front">Front </div>
                <div class="face left">Left  </div>
                    <div class="face right">Right </div>
                        <div class="face backward">Backward</div>
                        <div class="face top">Top</div>
                        <div class="face bottom">Bottom</div>
        </div>
    </div>
</body>
</html>

Solution

don't use quotes in rotate function rotateY('-90deg') use rotateY(-90deg)
instead of first using rotate and then translate (or worse, mix the two logics), first: translate a face, and then rotate it:

.container {
  width: 400px;
  height: 400px;
  border: 2px solid white;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 800px;
}

.cube {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  animation: cubeRotate 5s linear infinite alternate;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.7;
  line-height: 100px;
  text-align: center;
  font-size: 1.4rem;
  /* backface-visibility: hidden; /* uncomment to test all 6 faces */
}

.front {
  background-color: lightblue;
  transform: translateZ(100px) rotateY(0deg);
}

.back {
  background-color: lightgreen;
  transform: translateZ(-100px) rotateY(180deg);
}

.left {
  background-color: peru;
  transform: translateX(-100px) rotateY(-90deg);
}

.right {
  background-color: blueviolet;
  transform: translateX(100px) rotateY(90deg);
}

.top {
  background-color: brown;
  transform: translateY(-100px) rotateX(90deg);
}

.bottom {
  background-color: aqua;
  transform: translateY(100px) rotateX(-90deg);
}

@keyframes cubeRotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

<div class="container">
  <div class="cube">
    <div class="face front">Front</div>
    <div class="face left">Left </div>
    <div class="face right">Right </div>
    <div class="face back">Back</div>
    <div class="face top">Top</div>
    <div class="face bottom">Bottom</div>
  </div>
</div>

The above can now be rewritten also using translate and rotate CSS properties without changing the values for axis:

.container,
.cube,
.face {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--size, 200px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
}

.container {
  --size: 400px;
  perspective: 800px;
}

.cube {
  --size: 200px;
  animation: cubeRotate 5s linear infinite;
}

.face {
  position: absolute;
  opacity: 0.8;
  font-size: 1.4rem;
  background-color: var(--bg);
}

.front {
  --bg: #0bf;
  translate: 0 0 100px; rotate: 0 0 0 90deg;
}

.back {
  --bg:#fb0;
  translate: 0 0 -100px; rotate: 0 1 0 180deg;
}

.left {
  --bg:#f0b;
  translate: -100px 0 0; rotate: 0 1 0 -90deg;
}

.right {
  --bg:#0fb;
  translate: 100px 0 0; rotate: 0 1 0 90deg;
}

.top {
  --bg:#b0f;
  translate: 0 -100px 0; rotate: 1 0 0 90deg;
}

.bottom {
  --bg:#bf0;
  translate: 0 100px 0; rotate: 1 0 0 -90deg;
}

@keyframes cubeRotate {
  to { rotate: 1 1 1 1turn; }
}

<div class="container">
  <div class="cube">
    <div class="face front">Front</div>
    <div class="face left">Left </div>
    <div class="face right">Right </div>
    <div class="face back">Back</div>
    <div class="face top">Top</div>
    <div class="face bottom">Bottom</div>
  </div>
</div>