JSFiddle - React, Tailwind, and code Playground

by Dawid Karwat

HTML

<div id="container">
    <div id="pack1">
        <div></div>
        <div></div>
    </div>
    <div id="pack2">
        <div></div>
        <div></div>
    </div>
</div>

CSS

#container {
    width: 400px;
    height: 400px;
    perspective: 800px;
}
#container > div {
    position: relative;
    width: 120px;
    height: 120px;
    margin-left: 10px;
    margin-right: 10px;
    float: left;
    box-shadow: inset 0 0 2px 7px #79A;
    transform: translate(60px, 230px) rotateX(70deg);
    transform-style: preserve-3d;
}
#container > div > div {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 8px #37C;
    transform-style: preserve-3d;
}
#pack1 > div:first-child, 
#pack2 > div:first-child 
{ transform: translateZ(100px)}

#pack1 > div:last-child { transform: translateZ(150px)}
#pack2 > div:last-child { transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,150,1)}

JavaScript

/* 
In matrix3d, the next-to-last value for translateZ, is not scalable.
(It applies also for values responsible for translating on the X and Y axis)
Just change the size of the page by holding down CTRL and using the Wheel.

For one div only I used 'transform: matrix3d(...);'
to distinguish it from other div's
*/