JSFiddle - React, Tailwind, and code Playground

by pauldwaite

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 {
        -webkit-transform-style: preserve-3D;
    }
    #container1 {
        -webkit-perspective: 400px;
        margin-bottom: 10px;
    }
    #container2 {
        -webkit-transform: scaleZ(3);
    }
    #div1 {
        width: 96px;
        height: 96px;
        background: blue;
        -webkit-transform: rotateX(10deg);
    }