Week 3 – Transform

✨ Jabont

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#fff;
        margin:0;
        font-family:sans-serif;
        display:flex;
        justify-content:center;
        align-items:center;
      }
      *{
        box-sizing:border-box;
      }
      .box{
        position:absolute;
        width:50vw;
        height:50vw;
        background:#f4f4f4;
/*         border:4px solid #ddd; */
        transform:translateY(0vw) rotate(-30deg) skew(30deg);
        transition:all 1s;
        border-radius:2vw;
        cursor:zoom-in;
      }
      .element{
        background:#ddd6;
        width:100%;
        height:100%;
        position:absolute;
        transition:all .3s;
        border-radius:2vw;
        
      }
      .box:hover{
        transform:translateY(10vw) rotate(-30deg) skew(30deg);
        ;
      }
      .e4{
        background:hsl(270,100%,60%,75%);
        border:4px solid hsl(270,100%,60%,100%);
      }
      .e3{
        background:hsl(270,80%,60%,75%);
        border:4px solid hsl(270,80%,60%,100%);
      }
      .e2{
        background:hsl(270,60%,60%,75%);
        border:4px solid hsl(270,60%,60%,100%);
      }
      .e1{
        background:hsl(270,40%,60%,75%);
        border:4px solid hsl(270,40%,60%,100%);
      }
      .box:hover .e1{
        transform:translate(4vw,-4vw);
      }
      .box:hover .e2{
        transform:translate(8vw,-8vw);
      }
      .box:hover .e3{
        transform:translate(12vw,-12vw);
      }
      .box:hover .e4{
        transform:translate(16vw,-16vw);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="element e1">
      </div>
      <div class="element e2">
      </div>
      <div class="element e3">
      </div>
      <div class="element e4">
      </div>
    </div>
  </body>
</html>