JSFiddle - React, Tailwind, and code Playground

HTML

<p>If you remove <code>-webkit-transform: scaleZ(3);</code>, then the blue box will fit inside the grey box.</p>

<div id="bg">
    <div id="container1"><div id="container2">
        <div id="div1"></div>
    </div></div>
</div>

CSS

#bg {
        width: 1000px;
        margin-left: 48px;
        padding: 20px;
        background: #ccc;
    }
    #container1,
    #container2 {
   

    }
    #container1 {
        margin-bottom: 10px;
                -webkit-perspective: 200px;
    }
    #container2 {

                 -webkit-transform-style: preserve-3D;
        -webkit-transform: scaleZ(2);
    }
    #div1 {
        width: 96px;
        height: 96px;
        background: blue;
        -webkit-transform: rotateX(35deg);
    }