JSFiddle - React, Tailwind, and code Playground

HTML

<div id='reset'>Reset</div>
<div id="camera">
    <div id="cubewrapper">
        <div id="cube">
                <div id="one" class="face">1
                    <!--<div class='worldview'>worldview</div>-->
                </div>
                <div id="two" class="face">2
                    <!--<div class='worldview'>worldview</div>-->
                </div>
                <div id="three" class="face">3
                    <!--<div class='worldview'>worldview</div>-->
                </div>
                <div id="four" class="face">4
                    <!--<div class='worldview'>worldview</div>-->
                </div>
                <div id="five" class="face">5
                    <!--<div class='worldview'>worldview</div>-->
                </div>
                <div id="six" class="face">6
                    <!--<div class='worldview'>worldview</div>-->
                </div>
        </div>
    </div>
</div>

CSS

#camera
{   
-webkit-perspective:1800px;
-webkit-perspective-origin: center center;
}

#camera > div
{
margin:0 auto 0 auto;
width:600px;
}

#cube
{
position: relative;
-webkit-transition: -webkit-transform 200ms linear;
-webkit-transform-style: preserve-3d;
float:left;
    margin-top:50px;
}

.face
{
position: absolute;
padding: 0px;
background-color: rgba(50, 50, 50, 0.3);
border:1px solid black;
text-align:center;
font-size:10em;
}

#reset{
    position:fixed;
    cursor:pointer;
    border:1px solid black;
    border-radius:5px;
    padding:2px 5px;
}

JavaScript

$(document).ready(function() { /*Initiate the cube css. This must be done in jquery since css is fluid*/
    initFluidCubeCSS();

    /*Don't touch this! We use global variables to remember the cube's current rotation*/
    window.cubescale = 1; //Initial scale is 1.
    window.cubeduration = 200; //Initial transition duration is 200ms.
    window.cubestate = 2;

    /*Bind handler to window for arrow keys to transform the cube*/
    $(window).bind('keydown', function(e) {
        arrowKeyHandler(e);
    });

    rotateCube(-90, 90, 0, "same", "same"); //THIS IS THE POSITION THAT HAS PROBLEMS
    $('#reset').bind('click', function() {
        resetCube();
    });
});

function initFluidCubeCSS() {
    var cube = $('#cube');
    var available_height = $(window).height() - 112; //Calculate the screen height for fluidity.
    (available_height > 300) ? cube.css('height', available_height) : cube.css('height', '300px'); //For ux, minimum height for cube is 500px.
    var size = cube.css('height');
    size = parseInt(size.substring(0, size.length - 2));

    /*Style cube & face initial sizes*/
    cube.css('width', size + 'px');
    cube.children('.face').each(function() {
        $(this).css('height', size + 'px').css('width', size + 'px');
    });
    $('#cubewrapper').css('width', size + 'px');

    /*Style each face 3d rotation and z-distance*/
    var i = size / 2;
    $('#cube > #one').css('-webkit-transform', 'rotateX(90deg) translateZ(' + i + 'px)');
    $('#cube > #two').css('-webkit-transform', 'translateZ(' + i + 'px)');
    $('#cube > #three').css('-webkit-transform', 'rotateY(90deg) translateZ(' + i + 'px)');
    $('#cube > #four').css('-webkit-transform', 'rotateY(180deg) translateZ(' + i + 'px)');
    $('#cube > #five').css('-webkit-transform', 'rotateY(-90deg) translateZ(' + i + 'px)');
    $('#cube > #six').css('-webkit-transform', 'rotateX(-90deg) translateZ(' + i + 'px)');
}

/*Custom rotateCube method*/

function rotateCube(anglex, angley, anglez,...