Let’s make a cube of three squares. In our projection, the top side of the cube will be visible to us and it will be rotated 45 degrees. Let’s get to work!
Let’s start by preparing the top side (the .side.top element).
First we need to rotate this element 45 degrees.
Let’s do it counterclockwise.
Then we will distort this shape 15 degrees in both directions.

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.


<!DOCTYPE html>
      body {
        margin: 0;
        height: 100vh;
        background-color: #F1FFFA;
      body, .side {
        display: grid;
        place-items: center;
      .cube {
        position: relative;
        width: 150px;
        height: 310px;
      .side {
        position: absolute;
        width: 150px;
        height: 150px;
        font-family: monospace;
        color: white;
        font-size: 22px;
      .top {
        background-color: #E2F9B8;
      .left {
        background-color: #BBCE8A;
      .right {
        background-color: #939F5C
    <div class="cube">
      <div class="side top">top</div>
      <div class="side left">left</div>
      <div class="side right">right</div>