JSFiddle - React, Tailwind, and code Playground

by renfley

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="experiment">
    <div id="cube">
        <div class="face one">
            More Resume
        </div>
        <div class="face two">     
			<center><h2>Andre St-Jacques</h2></center>
			<center><h4>613-850-XXXX</h4></center>
			<center><h4>Super Secret DataMan</h4></center><br><br>
			<center><h4>Up Right Down Left</h4></center>
		</div>
        <div class="face three">
            <h2>Skills</h2>
			<ol>
				<li>PHP</li>
				<li>Javascript</li>
				<li>MySQL</li>
				<li>HTML</li>
				<li>CSS</li>
				<li>Data Mining</li>
			</ol>
        </div>
        <div class="face four">
           More Resume
        </div>
        <div class="face five">
           More Resume
        </div>
        <div class="face six">
            <p>
				613-850-4890
			</p>
        </div>
    </div>
</div>

CSS

#experiment {
  -webkit-perspective: 800px;
  -webkit-perspective-origin: 50% 200px;
  -moz-perspective: 800px;
  -moz-perspective-origin: 50% 200px;
  perspective: 800px;
  perspective-origin: 50% 200px;
}

#cube {
  position: relative;
  margin: 100px auto;
  height: 400px;
  width: 400px;
  -webkit-transition: -webkit-transform 2s linear;
  -webkit-transform-style: preserve-3d;
  -moz-transition: -moz-transform 2s linear;
  -moz-transform-style: preserve-3d;
  transition: transform 2s linear;
  transform-style: preserve-3d;
}

.face {
  position: absolute;
  height: 360px;
  width: 360px;
  padding: 20px;
  background-color: rgba(50, 50, 50, 0.8);
  font-size: 27px;
  line-height: 1em;
  color: #fff;
  border: 1px solid black;
  border-radius: 3px;
}

#cube .one  {
  -webkit-transform: rotateX(90deg) translateZ(200px);
  -moz-transform: rotateX(90deg) translateZ(200px);
  transform: rotateX(90deg) translateZ(200px);
}

#cube .two {
  -webkit-transform: translateZ(200px);
  -moz-transform: translateZ(200px);
  transform: translateZ(200px);
}

#cube .three {
  -webkit-transform: rotateY(90deg) translateZ(200px);
  -moz-transform: rotateY(90deg) translateZ(200px);
  transform: rotateY(90deg) translateZ(200px);
}

#cube .four {
  -webkit-transform: rotateY(180deg) translateZ(200px);
  -moz-transform: rotateY(180deg) translateZ(200px);
  transform: rotateY(180deg) translateZ(200px);
}

#cube .five {
  -webkit-transform: rotateY(-90deg) translateZ(200px);
  -moz-transform: rotateY(-90deg) translateZ(200px);
  transform: rotateY(-90deg) translateZ(200px);
}

#cube .six {
  -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
  -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
  transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
}

JavaScript

$(function(){
        $('.show-experiment').on('click', function(evt) {
            evt.preventDefault();
            $('.fallback').fadeOut('slow', function() {
                $('.test').fadeIn('slow');
            });
        });
    });

var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
    prop,
    el = document.createElement('div');

for(var i = 0, l = props.length; i < l; i++) {
    if(typeof el.style[props[i]] !== "undefined") {
        prop = props[i];
        break;
    }
}

var xAngle = 0, yAngle = 0;
$('body').keydown(function(evt) {
    switch(evt.keyCode) {
        case 37: // left
            yAngle -= 90;
            break;

        case 38: // up
            xAngle += 90;
            evt.preventDefault();
            break;

        case 39: // right
            yAngle += 90;
            break;

        case 40: // down
            xAngle -= 90;
            evt.preventDefault();
            break;
    };
    document.getElementById('cube').style[prop] = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
});