JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div id="cube" class="cube">
    <div class="side blue front">FRONT</div>
    <div class="side pink back">BACK</div>
    <div class="side aqua right">RIGHT</div>
    <div class="side green left">LEFT</div>
    <div class="side orange top">TOP</div>
    <div class="side red bottom">BOTTOM</div>
  </div> 
</div>
<div class="cubecalculator"></div>
<p>rotate cube using arrow keys<p>

CSS

html {height: 100%;}


body {
  background-image: radial-gradient(#333, #222);
  overflow: hidden;
  height: 100%;
  font-family: sans-serif;
}

.container {
  position: relative;
  margin: 100px auto;
  width: 200px;
  height: 200px;
  perspective: 1000px;
}

.cube {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: -webkit-transform 1s;
   
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateX(0deg);
}

.cubecalculator {
  -webkit-transform: rotateX(0deg);
}

p {
  width: 100%;
  color: #555;
  text-align: center;
  line-height: 1.5;
}

 .cube .side {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    box-shadow: inset 0 0 120px rgba(0,0,0,0.2);
  }

.blue {
    background-image: radial-gradient(#4a5096, #4a5096);
}
.pink {
    background-image: radial-gradient(#944a67, #944a67);
}
.aqua {
    background-image: radial-gradient(#4a8994, #4a8994);
}
.green {
    background-image: radial-gradient(#4a944c, #4a944c);
}
.orange {
    background-image: radial-gradient(#4a944c, #4a944c);
}
.red {
    background-image: radial-gradient(#944a4a, #944a4a);
}
    
.front {-webkit-transform: rotateX(0deg) translateZ(100px);}   
.back {-webkit-transform: rotateX(180deg) translateZ(100px);}   
.right {-webkit-transform: rotateY(90deg) translateZ(100px);}   
.left {-webkit-transform: rotateY(-90deg) translateZ(100px);}   
.top {-webkit-transform: rotateX(90deg) translateZ(100px);}   
.bottom {-webkit-transform: rotateX(-90deg) translateZ(100px);}

JavaScript

function applyTransform (transform) {

	var cubeCalculator = $('.cubecalculator');
	var cube = $('#cube');

 	var matrix = cubeCalculator.css('webkitTransform');
	var composite = transform + ' ' + matrix;
	cubeCalculator.get(0).style.webkitTransform = composite;

	matrix = cubeCalculator.css('webkitTransform');
	cube.get(0).style.webkitTransform = matrix;
}

// rotate using arrow keys
$(document).keyup(function(e) {
	
	e.preventDefault();

	var key = e.which,
		arrow = {left: 37, up: 38, right: 39, down: 40},
		t;

	switch(key) {
		case arrow.left:
			t = 'rotateY(-90deg)';
		break;

		case arrow.right:
			t = 'rotateY(90deg)';
		break;

		case arrow.up:
			t = 'rotateX(90deg)';
		break;

		case arrow.down:
			t = 'rotateX(-90deg)';
		break;
	}

	applyTransform (t);

});