Let’s practice with 2d transforming an element

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>
<html>
  <head>
    <title>2D transform</title>
    <style>
      body {
        display: flex;
        height: 100vh;
        align-items: center;
        justify-content: center;
        margin: 0;
      }
      .container, .element, .substrate  {
        width: 100px;
        height: 100px;
        border-radius: 3px;
      }
      .container, .element {
        position: relative;
      }
      .container + .container {
        margin-left: 64px;
      }
      .substrate {
        position: absolute;
        background-color: #DBE4EE;
        border: 2px dashed #81A4CD;
        box-sizing: border-box;
      }
      .element {
        display: grid;
        place-items: center;
        color:white;
        font-size: 40px;
        font-family: monospace;
      }
      .element.one {
        background-color: #6E44FF;
      }
      .element.two {
        background-color: #B892FF;
      }
      .element.three {
        background-color: #FFC2E2;
      }
      .element.four {
        background-color: #FF90B3;
      }
      .element.five {
        background-color: #EF7A85;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="substrate"></div>
      <div class="element one">1</div>
    </div>
    <div class="container">
      <div class="substrate"></div>
      <div class="element two">2</div>
    </div>
    <div class="container">
      <div class="substrate"></div>
      <div class="element three">3</div>
    </div>
    <div class="container">
      <div class="substrate"></div>
      <div class="element four">4</div>
    </div>
    <div class="container">
      <div class="substrate"></div>
      <div class="element five">5</div>
    </div>
  </body>
</html>