JSFiddle - React, Tailwind, and code Playground

by Kaeden

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<div id='wrapper'>
<!--<div id='cover'>-->

</div>
<section class="container">
  <div>
    <span id="pitch">0</span>deg
    <br/><span id="yawn">0</span>deg
    <br><span id="dX">0</span> dX
    <br><span id="dY">0</span> dY
  </div>
  <!--<div class="cube">
    <figure class="front">1</figure>
    <figure class="back">2</figure>
    <figure class="right">3</figure>
    <figure class="left">4</figure>
    <figure class="top">5</figure>
    <figure class="bottom">6</figure>
  </div>-->
</section>
</div>

CSS

body {
  background: black;
  overflow: hidden;
  
}

#wrapper {
  position:absolute;
  height:100%;
  width:100%;
  overflow: hidden;
}

#cover {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: .50;
  z-index: 100;
  color: white;
}

.container {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 0 auto 40px;
  text-align: center;
  /*border: 1px dashed #222222;*/
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
  z-index: 3;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: white;
}

.cube {
  /*width: 100%;
  height: 100%;*/
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
}

.cube figure {
  display: block;
  position: absolute;
  width: 196px;
  height: 196px;
  border: 2px solid black;
  line-height: 196px;
  font-size: 120px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.cube.panels-backface-invisible figure {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.cube > figure {
  background: rgba(55, 55, 55, .5);
}

.cube:hover > figure {
  background: rgba(255, 0, 0, 0.5);
}

/*
.cube .front {
  background: hsla( 0, 100%, 50%, 0.7);
}

.cube .back {
  background: hsla( 60, 100%, 50%, 0.7);
}

.cube .right {
  background: hsla( 120, 100%, 50%, 0.7);
}

.cube .left {
  background: hsla( 180, 100%, 50%, 0.7);
}

.cube .top {
  background: hsla( 240, 100%, 50%, 0.7);
}

.cube .bottom {
  background: hsla( 300, 100%, 50%, 0.7);
}
*/
/*
.cube .front {
  transform: rotateY( 0deg) translateZ(...

JavaScript

// Cubes

var CUBE_SIZE = 75;

var SPACING= 15;

mousedown = 0;

document.onmousedown = function(e) {
  mousedown = 1;
}

document.onmouseup = function(e) {
  mousedown = 0;
  lastX = undefined;
  lastY = undefined;
  currentX = undefined;
  currentY = undefined;
}

//setInterval(function() {
//mousedown = 0;
//},300);

var lastX;
var lastY;
var currentX;
var currentY;

var deltaX;
var deltaY;

var yawn = -45;
var pitch = -20;

var CUBE_SIDE =  (CUBE_SIZE - 4) + "px";

var render = function(x, y, z, yawn, pitch) {
  var xyz = x + "-" + y + "-" + z;
  var $cube = $('.cube.' + xyz);
  if (!($cube[0])) {
  	$cube = $("<div class='cube " + xyz + "'><figure class='front'></figure><figure class='back'></figure><figure class='right'></figure><figure class='left'></figure><figure class='top'></figure><figure class='bottom'></figure>");
    $(".container").append($cube);
  }
  
  $cube.find('figure').each(function() {
  	$(this).css("width", CUBE_SIDE);
   	$(this).css("height", CUBE_SIDE);
    $(this).css("line-height", CUBE_SIDE);
    
    if($(this).hasClass('front')) {
    	//$(this).css("background", "red");
      $(this).css("transform", 'rotateX( ' + (0 + pitch) + 'deg ) rotateY( ' + (0 + yawn) + 'deg ) translateZ( ' + (CUBE_SIZE / 2 - (CUBE_SIZE + SPACING) * y) + 'px )' + ' translateX(' + (CUBE_SIZE + SPACING) * x + 'px)' + ' translateY(' + (CUBE_SIZE + SPACING) * z * -1 + 'px)');
    }
    else if($(this).hasClass('back')) {
    	$(this).css("transform", 'rotateX( ' + (180 + pitch) + 'deg ) rotateY( ' + (0 - yawn) + 'deg ) 		translateZ( ' + (CUBE_SIZE / 2 - (CUBE_SIZE + SPACING) * y * -1) + 'px )' + ' translateX(' + (CUBE_SIZE + SPACING) * x + 'px)' + ' translateY(' + (CUBE_SIZE + SPACING) * z * 1 + 'px)');
    }
    else if ($(this).hasClass('right')) {
    	$(this).css("transform", 'rotateX( ' + (0 + pitch) + 'deg ) rotateY( ' + (90 + yawn) + 'deg ) translateZ( ' + ((CUBE_SIZE / 2) - (CUBE_SIZE + SPACING) * x * -1) + 'px )' + ' translateX(' + (CUBE_SIZE +...