JSFiddle - React, Tailwind, and code Playground

by Vince

HTML

<div id="container">
    <div id="cb"></div>
</div>

CSS

#container {
    -webkit-perspective: 600px;
    -webkit-perspective-origin: 50% 50%;
    text-align: center;
}
#cb {
    display: inline-block;
    width: auto;
    padding: 0;
    margin: 0;
    background-color: purple;
    border: 1px solid #000;
    -webkit-animation: moveThis 5s infinite linear;
    -webkit-transform: rotateX(71deg) rotateY(0deg) rotateZ(0deg);
}
@-webkit-keyframes moveThis {
    0%  {
        -webkit-transform: rotateX(40deg) rotateY(0deg)  rotateZ(0deg);
    }
    100%{
        -webkit-transform: rotateX(40deg) rotateY(0deg)  rotateZ(360deg);
    }
}
#cb .odd {display: block;}
#cb .even {display: block;}
#cb .square {
    display: inline-block;
    margin: 0;
    padding: 0;
    background-color: white;
}
#cb .even .square:nth-child(odd),
#cb .odd .square:nth-child(even) {background-color: black;}

/* square animations */
.even .square {
    -webkit-animation: evenSquaresUp 2s infinite;
}
@-webkit-keyframes {
    0% {-webkit-transform: translateZ(0px);}
    33.33% {-webkit-transform: translateZ(20px);}
    33.33% {-webkit-transform: translateZ(-20px);}
    100% {-webkit-transform: translateZ(0px);}
}

JavaScript

function checkEven(val) {
    return val%2 == 0;
}
var html = '';
var cb = {
    cols: 8,
    rows: 8,
    width: 400,
    height: 400,
    squareWidth: function () {
        var size = this.width / 12;
        return size;
    },
    squareHeight: function () {
        var size = this.height / 12;
        return size;
    },
    html: function () {
        for (var r = 0; r < this.rows; r++) {
            html += '<div ';
            if (checkEven(r)) {
                html += 'class="even">';
            } else {
                html += 'class="odd">';
            }
            html += '\n<!-- row starts -->\n';
            for (var s = 0; s < this.cols; s++) {
                html += '<div class="square" style="width: ' + this.squareWidth() + 'px; height: ' + this.squareHeight() + 'px;">&nbsp;</div>';
            }
            html += '</div>';
            html += '\n<!-- row finish -->\n';
        }
        return html;
    }
};
$('#cb').append(cb.html());
// console.log(cb.html());
var timer = setTimeout(function () {
    console.clear();
}, 2000);