Let’s build a full-fledged 3D cube Do not change already added styles, add all new styles only to existing classes.
First of all, turn all the necessary sides to the desired angle.
The side with the class back must be rotated 180 degrees around the Y axis.
The left and right (.left and .right) sides must be rotated 90 degrees, each in its own direction.
The top and bottom (.top and .bottom) sides must also be turned in the desired direction already around the X axis.
The front side (.front) does not make sense to rotate

This task is part of the Full-Stack JavaScript Course .
If you have any issues with it, you can ask for community help below the post.
Feel free to help others if you’ve already solved the task.

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>