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>