JSFiddle - React, Tailwind, and code Playground
HTML
<div class="parent">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
CSS
.parent:hover{
transform: scale(1.25);
}
#one{
background: lime;
transform: translate(0px, 10px) rotate(15deg);
z-index: -2;
}
#two{
background: deeppink;
transform: scale(1.1);
z-index: -1;
}
#three{
background: indigo;
transform: translate(-10px, -10px) scale(0.9);
z-index:-3;
}
#one, #two, #three{
width: 100px;
height: 100px;
transform-origin: 0px 0px;
box-shadow: 3px 2px 4px #000;
}
.parent{
width: 100px;
margin: 50px 100px;
}