JSFiddle - React, Tailwind, and code Playground

by Cal Francesco

HTML

<div id="stationMap" class="display">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="55 -30 360 360" id="hexGrid">
        <defs>
            <pattern x="0" y="0" height="10" width="10" patternUnits="userSpaceOnUse" id="blockedHexPattern">
                <line x1="0" y1="10" x2="10" y2="0"></line>
            </pattern>
        </defs> <a id="hex0-0" class="hexContainer">
        <polygon class="hex open" points="81.96152422706632,45 55.98076211353316,60 30,45 30.000000000000004,14.999999999999996 55.98076211353315,0 81.96152422706632,14.999999999999986"></polygon>
    </a>
 <a id="hex0-2" class="hexContainer">
        <polygon class="hex blocked" points="185.88457268119896,45 159.9038105676658,60 133.92304845413264,45 133.92304845413264,14.999999999999996 159.9038105676658,0 185.88457268119896,14.999999999999986" fill="url(#blockedHexPattern)"></polygon>
    </a>
 <a id="hex0-6" class="hexContainer">
        <polygon class="hex blocked" points="393.7306695894642,45 367.749907475931,60 341.76914536239786,45 341.76914536239786,14.999999999999996 367.749907475931,0 393.7306695894642,14.999999999999986" fill="url(#blockedHexPattern)"></polygon>
    </a>
 <a id="hex0-7" class="hexContainer">
        <polygon class="hex blocked" points="445.6921938165305,45 419.71143170299734,60 393.7306695894642,45 393.7306695894642,14.999999999999996 419.71143170299734,0 445.6921938165305,14.999999999999986" fill="url(#blockedHexPattern)"></polygon>
    </a>
 <a id="hex1-0" class="hexContainer">
        <polygon class="hex open" points="55.98076211353316,90 30.000000000000004,105 4.01923788646684,90 4.019237886466843,60 29.999999999999993,45 55.98076211353315,59.999999999999986"></polygon>
        <rect class="rect" fill="red" x="5" y="67.5" width="50" height="40"/>
    </a>
 <a id="hex1-3" class="hexContainer">
        <polygon class="hex blocked" points="211.8653347947321,90 185.88457268119893,105...

CSS

.display {
    animation: displayFlicker 100ms cubic-bezier(.37, 0, .41, 1.74) 100ms 1 normal forwards;
    -webkit-animation: displayFlicker 100ms cubic-bezier(.37, 0, .41, 1.74) 100ms 1 normal forwards;
    background: #000;
    display: block;
    border-left: 0.25rem solid #000;
    border-right: 0.25rem solid #000;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 480px;
    overflow: hidden;
    width: 1096px;
}
#hexGrid {
    box-sizing: border-box;
    -moz-box-sizing: border-box;    
    display: block;
    height: 100%;
    -webkit-transform:  rotateX(45deg) scale3d(1.6, 1.6, 1.6); /*add perspective to parent*/
    -moz-transform:  rotateX(45deg) scale3d(1.6, 1.6, 1.6);    
    -ms-transform: rotateX(45deg) scale3d(1.6, 1.6, 1.6); 
    -o-transform:rotateX(45deg) scale3d(1.6, 1.6, 1.6);  
    transform:  rotateX(45deg) scale3d(1.6, 1.6, 1.6);
    transform-style: preserve-3d;
    width: 100%;
}
.hexContainer {
    outline: none;
    transform-style: preserve-3d;
}
.hex {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: inline-block;
    height: 4.4vmin;
    opacity: 1;
    outline: none;
    position: relative;
    stroke: #0CF;
    stroke-width: 0.0625rem;
    transform: scale3d(1, 1, 1);
    transition: all linear 300ms;
    width: 8vmin;
}
.hex.open {
    fill: rgba(0, 204, 255, 0.3);
}
.hex.blocked {
    fill: url(#blockedHexPattern);
    fill-opacity: 0.3;
}
.hexContainer:focus .open, .hexContainer:hover .open {
    cursor: pointer;
    fill: rgba(0, 204, 255, 0.8);
    outline: none;
}
.hexContainer:focus .blocked, .hexContainer:hover .blocked {
    cursor: pointer;
    fill: url(#blockedHexPattern);
    fill-opacity: 1;
    outline: none;
}
.hexContainer:focus .occupied, .hexContainer:hover .occupied {
    cursor: pointer;
    fill: rgba(50, 50, 50, 0.8);
    outline: none;
}
.hexContainer:focus .open, .hexContainer:focus .open.unblock {
    transform-origin: 50% 0%;
}
.hexContainer:focus .blocked...

JavaScript

//function for checking transform property in css
function checkCSS(selector,prop){
    var sel;
    [].slice.call(document.styleSheets).forEach(function(x){
        sel= [].slice.call(x.rules).filter(function(rule){
            return rule.selectorText=='#hexGrid';
        })
        return sel
    })
    return sel[sel.length-1].style[prop]
    
}
//store transform property
var storeTrans = checkCSS('#hexGrid','transform');

//straighten svg
var hexGrid = document.getElementById('hexGrid');
hexGrid.style.transform = 'rotateX(0)';

//get the position/dimensions for perfectly tilted red squares
var rects=document.querySelectorAll('rect');
var coorArray = [].slice.call(rects).map(function(x){return x.getBoundingClientRect()})



var stationMap = document.getElementById('stationMap');
//create element for creating an layer and append
var container = document.createElement('div');
container.className='container';
container.style.perspective='33vW';//reduced for simulating foreground
container.style.height=container.style.width =  '100%';
container.style.transform='translateY(-100%) rotateX(45deg) scale(1.6)';
stationMap.appendChild(container);

//create perfectly tilted red squares
coorArray.forEach(function(x){
   
var el = document.createElement('div')
el.style.position='absolute';
el.style.top= x.top+'px';
el.style.left=x.left+'px';
el.style.width= x.width+'px';
el.style.height= x.height+'px';
el.style.background= 'tomato';
el.style.transform='perspective(12vw) rotateX(130deg) translate3d(-15%, 50%,0)';

container.appendChild(el)
})



//set prosperctive and transform-style on common parent node
stationMap.style.transformStyle='preserve-3d';
stationMap.style.perspective='44vw';
//set transform value back and rip out old rect
hexGrid.style.transform = storeTrans;
Array.prototype.slice.call(rects).forEach(function(n){
    n.parentNode.removeChild(n)
})