JSFiddle - React, Tailwind, and code Playground

HTML

<div id=scr class=nopsp>
    <input id=rot type=range min=-90 max=90 value=-25>
    <label for=nopsp>
        <input id=nopsp type=checkbox autocomplete=off checked>nopsp</label>
    <div id=psp>
        <div id=fl></div>
        <div class="c pl" data-x=0 data-y=4>
            <div class=i></div>
            <div class=j></div>
            <div class=k></div>
            <div class=l></div>
        </div>
        <div class="c enr" data-x=2 data-y=2>
            <div class=i></div>
            <div class=j></div>
            <div class=k></div>
            <div class=l></div>
        </div>
        <div class="c enb" data-x=4 data-y=0>
            <div class=i></div>
            <div class=j></div>
            <div class=k></div>
            <div class=l></div>
        </div>
    </div>
</div>

CSS

#scr {
    background: #ecf0f1;
    bottom: 0;
    left: 0;
    overflow: hidden;
    perspective: 500px;
    position: absolute;
    right: 0;
    top: 0;
    transition: perspective 1s cubic-bezier(0,1,0.2,1);
}

#psp, #fl {
    height: 412px;
    position: absolute;
    width: 412px;
}

#psp {
    left: 50%;
    margin: -250px 0 0 -206px;
    top: 50%;
    transform: rotateX(45deg) rotateZ(-25deg);
    transform-style: preserve-3d;
    transition: transform 1s;
}

.nopsp {
    perspective: 9000px !important;
    transition: perspective 1s cubic-bezier(1,0,1,0.2) !important;
}
.nopsp #psp { transform: none !important; }

.c, .i, .j, .k, .l {
    height: 44px;
    position: absolute;
    transform-style: preserve-3d;
    width: 44px;
}

.i { transform:                                  translateZ(44px); }
.j { transform: translateZ(22px) rotateY(-90deg) translateZ(22px); }
.k { transform: translateZ(22px) rotateX(-90deg) translateZ(22px); }
.l { transform: translateZ(22px) rotateY( 90deg) translateZ(22px); }

.pl .i { background: #9c0; }
.pl .k { background: #8cbf00; }
.pl .j, .pl .l { background: #80b300; }

.enr .i { background: #f44; }
.enr .k { background: #f23333; }
.enr .j, .enr .l { background: #e52222; }

.enb .i { background: #3bf; }
.enb .k { background: #26b3f2; }
.enb .j, .enb .l { background: #1aaae5; }

JavaScript

function createCanvas(size, fn) {
    var canvas = document.createElement('canvas')
    canvas.height = canvas.width = size
    return fn(canvas.getContext('2d'))
}

function btouv(x) { return 45 * x + 4 }

function paintField(canvas) {
    var i, j
    canvas.fillStyle = '#95a5a6'
    canvas.fillRect(0, 0, 412, 412)
    for (i = 0; i < 9; ++i) {
        for (j = 0; j < 9; ++j) {
            if (i == 8 && j == 4)
                canvas.fillStyle = '#fb3'
            else
                canvas.fillStyle = '#ecf0f1'
            canvas.fillRect(btouv(i), btouv(j), 44, 44)
        }
    }

    canvas.beginPath()
    canvas.moveTo(btouv(3),      btouv(4))
    canvas.lineTo(btouv(4) + 22, btouv(4))
    canvas.lineTo(btouv(4) + 22, btouv(3) + 22)
    canvas.lineTo(btouv(5) + 44, btouv(4) + 22)
    canvas.lineTo(btouv(4) + 22, btouv(5) + 22)
    canvas.lineTo(btouv(4) + 22, btouv(4) + 44)
    canvas.lineTo(btouv(3),      btouv(4) + 44)
    canvas.closePath()

    canvas.fillStyle = '#95a5a6'
    canvas.fill()

    return canvas.canvas.toDataURL()
}

var floor = createCanvas(412, paintField)

function $id(id) { return document.getElementById(id) }

var style = document.createElement('style'),
    css = '#fl{background:url("' + floor + '")}', i

for (i = 0; i < 9; ++i) {
    css += '[data-x="%"]{left:#px}[data-y="%"]{top:#px}'
    .replace(/%/g, i).replace(/#/g, btouv(i))
}

style.appendChild(document.createTextNode(css))
document.head.appendChild(style)

function rot() {
    console.log('rot(' + this.value + ')')
    $id('psp').style.transform = 'rotateX(45deg) rotateZ(' + this.value + 'deg)'
}
$id('rot').addEventListener('input', rot, false)

function nopsp(event) {
    $id('scr').className = event.target.checked ? 'nopsp' : ''
}
$id('nopsp').addEventListener('change', nopsp, false)