JSFiddle - React, Tailwind, and code Playground

by netzwerg

HTML

<!doctype html>
<html>
<body>
<div id="scene">
    <div id="cube">
        <div class="row">
            <div class="face hidden"></div>
            <div class="face top"></div>
            <div class="face hidden"></div>
            <div class="face hidden"></div>
        </div>
        <div class="row">
            <div class="face left"></div>
            <div class="face back"></div>
            <div class="face right"></div>
            <div class="face front"></div>
        </div>
        <div class="row">
            <div class="face hidden"></div>
            <div class="face bottom"></div>
            <div class="face hidden"></div>
            <div class="face hidden"></div>
        </div>
    </div>
    <div id="grid">
        <div class="row">
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
        </div>
        <div class="row">
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
        </div>
        <div class="row">
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
        </div>
    </div>
</div>
</body>
</html>

CSS

#scene {
    margin-top: -50px;
    margin-left: 100px;
    -webkit-perspective: 1200;
    -webkit-perspective-origin: 90% -120px;
}

#cube {
    position: relative;
    margin: 0 auto;
    height: 400px;
    width: 400px;
    -webkit-transition: -webkit-transform 1s linear;
    -webkit-transform-style: preserve-3d;
}

.face {
    display: inline;
    float: left;
    border: 2px;
    border-style: solid;
    border-color: black;
    height: 96px;
    width: 96px;
    background-color: rgba(200, 10, 190, 0.4);
}

.hidden {
    visibility: hidden;
}

.left {
    -webkit-transform: rotateY(90deg);
    -webkit-transform-origin: center right;
}

.right {
    -webkit-transform: rotateY(-90deg);
    -webkit-transform-origin: center left;
}
.front {
    -webkit-transform: translateX(-200px) translateZ(100px);
}

.top {
    -webkit-transform: rotateX(-90deg);
    -webkit-transform-origin: bottom center;
}

.bottom {
    -webkit-transform: rotateX(90deg);
    -webkit-transform-origin: top center;
}

#grid {
    position: relative;
    margin: 0 auto;
    height: 400px;
    width: 400px;
    z-index: -1;
    -webkit-transition: -webkit-transform 1s linear;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translateY(-400px) rotateX(-90deg);
}

.row {
    float: left;
}

.cell {
    border: 2px;
    border-style: solid;
    border-color: grey;
    height: 96px;
    width: 96px;
    background-color: rgba(190, 190, 190, 0.7);
}

JavaScript

$(document).ready(function() {
    var tiltedLeft = false,
        tiltedRight = false;
    $('body').keydown(function(evt) {
        var xOrigin, zAngle;
        switch (evt.keyCode) {
        case 37:
            // left
            if (tiltedRight) {
                xOrigin = 200;
                zAngle = "-0";
                tiltedRight = false
            } else if (tiltedLeft == false) {
                xOrigin = 100;
                zAngle = -90;
                tiltedLeft = true
            }
            break;
        case 39:
            // right
            if (tiltedLeft) {
                xOrigin = 100;
                zAngle = "-0";
                tiltedLeft = false
            } else if (tiltedRight == false) {
                xOrigin = 200;
                zAngle = 90;
                tiltedRight = true
            }
            break;
        }
        var cube = $('#cube')[0];
        cube.style["-webkit-transform-origin"] = xOrigin + "px 200px";
        cube.style["-webkit-transform"] = "rotateZ(" + zAngle + "deg)";
    });
});