JSFiddle - React, Tailwind, and code Playground

CSS

* { margin: 0px; padding: 0px; }
        body { padding: 40px 10px; }
        .the_div { height: 200px; background-color: rgba(255, 192, 0, 0.5); float: left; display: inline-block; }
#real {
    -webkit-transform-origin: 50% 100%;
    margin-right: 40px;
    box-sizing: border-box;
    border: 1px solid black;
}
#info {
    float: left;
    margin-right: 40px;
    clear: both;
    display: block;
    height: 150px;
    border: none;
}
#fake {
    opacity: .8;
    width: 50px;
    box-sizing: border-box;
}
#container {
    border: none;
}

JavaScript

var WIDTH = 200;
var P = 400;
var direction = "up";
    jQuery(function(){
        function test(width, angle, p) {
            $('body').
                append($('<div id="info" />')).
                append($('<div id="container" />').
                    css({
                        margin: '50px 0px',
                        width: width+'px'
                    }).
                    append($('<div id="real" />').addClass('the_div').css({ 'width': width+'px' }))).
                append($('<div id="fake" />').addClass('the_div'));

            setInterval(function() {
                if(direction == "up")
                    angle++;
                else
                    angle--;
                
                if(angle == 0)
                    direction = "up";
                else if(angle == 90)
                    direction = "down";

                $('#real').css({ '-webkit-transform': ' perspective(' +p+ 'px) rotateX('+angle+'deg)' }).html(width);

                // initial coordinates
                var A = 0;
                var B = width;
                // new coordinates
                A = calc(A, angle*Math.PI/180, p);
                B = calc(B, angle*Math.PI/180, p);
                // translate back
                A += width/2;
                B += width/2;
                if(B < A) { var tmp = A; A = B; B = tmp; } // swap
                var realHeight = B-A;
                $('#fake').css({
                    'height': realHeight,
                    'margin-top': 200 - realHeight
                });

                // shows debug information
                var debug = function(values) { return values.map(function(i){ return i+': '+eval(i); }).join('<br />'); }
                $('#info').html($('<div />').html(debug(['width', 'p', 'angle', 'A', 'B', 'realHeight'])));

            }, 100);
        }

        function calc(oldx, angle, p) {
            var x = Math.cos(angle) * oldx;
            var z = Math.sin(angle) *...