JSFiddle - React, Tailwind, and code Playground

HTML

<div id="maincol">
    <div id="main3DWrapper">
        <div class="threedcontainer" id="main3DContainer">
            <div id="leftwall"></div>
        </div>
    </div>
</div>
<table>
    <tbody id="tablebody">
        <tr>
            <td>translateZ distance</td>
            <td>getBoundingClientRect().top</td>
        </tr>
    </tbody>
</table>

CSS

#maincol {
    display: block;
    height: 971px;
    left: 134.390625px;
    position: absolute;
    width: 1411.1875px;
    z-index: 500;
}
#main3DWrapper {
    -webkit-perspective: 1500px;
    perspective:1500px;
    -webkit-perspective-origin: 50% 1%;
    perspective-origin:50% 1%;
    -webkit-transform: translate3d(0, 0, 0, 0);
    transform:translate3d(0, 0, 0, 0);
    display: block;
    height: 100%;
    left: -121.96603393554688px;
    position: absolute;
    top: 409.5150146484375px;
    width: 100%;
}
#main3DContainer {
    -webkit-transform-style: preserve-3d;
    transform-style:preserve-3d;
    width:100%;
    height:100%;
}
#leftwall {
    height:100%;
    width:71%;
    -webkit-transform:rotateY(180deg);
    transform:rotateY(180deg);
    /*background-color:purple;*/
    position:absolute;
}
table {
    z-index:1000;
}

JavaScript

for (var count = 0, dist = 1014, leftTop = 0; dist < 1015; count++, dist += .01, leftTop = document.getElementById('leftwall').getBoundingClientRect().top, document.getElementById('tablebody').innerHTML += '<tr><td>' + dist + '</td><td>' + count + '</td><td>' + leftTop + '</td></tr>') {
    var container = document.getElementById('main3DContainer'),
        transf = 'translateZ(' + dist + 'px) rotateX(-90deg) rotateY(180deg) translateZ(429.001px)';
    container.style.webkitTransform = transf;
    container.style.transform = transf;
    (document.getElementById('leftwall').getBoundingClientRect());
}