JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<div class="container">
  <div class="cube">
    <div class="side front">front</div>
    <div class="side back">back</div>
    <div class="side right">right</div>
    <div class="side left">left</div>
    <div class="side top">top</div>
    <div class="side bottom">bottom</div>
  </div>
</div>

CSS

body {
	background-image: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/blackorchid.png);
}

.container {
	position: relative;
	margin: 20px auto;
  margin-top: 50px;
	width: 200px;
	height: 200px;
	perspective: 800px;
}

.cube {
  width: inherit;
  height: inherit;
	-webkit-transition: -webkit-transform .5s linear;
	-moz-transition: -moz-transform .5s linear;
	transition: transform .5s linear;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.side {
	position: absolute;
	width: inherit;
	height: inherit;
	border: 8px solid #fff;
	font: normal 50px Arial;
	text-align: center;
	line-height: 200px;
	color: #000000;
}

.front {transform: translateZ(108px); background-color: #A5F84C;}
.back {transform: rotateY(180deg) translateZ(108px); background-color: #8EF8F2;}
.right {transform: rotateY(90deg) translateZ(108px); background-color: #F7AE3C;}
.left {transform: rotateY(-90deg) translateZ(108px); background-color: #F569F7;}
.top {transform: rotateX(90deg) translateZ(108px); background-color: #FBF977;}
.bottom {transform: rotateX(-90deg) translateZ(108px); background-color: #FF5757;}

JavaScript

(function () {
  var rotateY = 0, rotateX = 0;
  document.onkeydown = function (e) {
  	// left: 37, up: 38, right: 39, down: 40,
    if (e.keyCode === 37) rotateY -= 90;
    else if (e.keyCode === 38) rotateX += 90;
    else if (e.keyCode === 39) rotateY += 90;
    else if (e.keyCode === 40) rotateX -= 90;
    document.querySelector('.cube').style.transform = 'rotateX('+rotateX+'deg)'+'rotateY('+rotateY+'deg)';
  }
})();