Построим полноценный 3D куб.
Не изменяй уже добавленные стили, все новые стили добавляй только к уже существующим классам.
Первым делом повернем на нужный угол все необходимые стороны.
Сторона с классом back должна быть развернута на 180 градусов вокруг оси Y.
Левая и правая (.left и .right) стороны должны быть развернуты на 90 градусов, каждая в своем направлении.
Верхняя и нижняя (.top и .bottom) стороны должны быть тоже развернуты в нужном направлении уже вокруг оси X.
Переднюю сторону (.front) нет смысла вращать

Эта задача — часть курса по Full-Stack JavaScript .
Ты можешь задать свой вопрос в комментариях под постом.
Если ты уже решил задачу, то не стесняйся помочь другим.

Начни Учить Full-Stack JavaScript СЕЙЧАС!

index.html

<!DOCTYPE>
<html>
  <head>
    <title>3D Cube</title>
    <style>
      body {
          font-family: monospace;
          display: grid;
          place-items: center;
          height: 100vh;
      }
      .cube {
          width: 150px;
          height: 150px;
          position: relative;
      }
      .side {
          position: absolute;
          width: 150px;
          height: 150px;
          display: grid;
          place-items: center;
          font-size: 18px;
          border: 1px solid red;
      }
      .front {
         background-color:  rgb(117, 244, 244);
      }
      .back {
          background-color: rgb(144, 224, 243);
      }
      .left {
          background-color: rgb(184, 179, 233);
      }
      .right {
          background-color: rgb(217, 153, 185);
      }
      .top {
          background-color: rgb(209, 123, 136);
      }
      .bottom {
          background-color: rgb(219, 208, 83);
      }
    </style>
  </head>
  <body>
  <div class="cube">
    <div class="side front">Front</div>
    <div class="side back">Back</div>
    <div class="side left">Left</div>
    <div class="side right">Right</div>
    <div class="side top">Top</div>
    <div class="side bottom">Bottom</div>
  </div>
  </body>
</html>