Animated CodePen Logo

index.html

<div class="cube-container">
  <div id="cube">
		<figure class="side front"></figure>
		<figure class="side back"></figure>
		<figure class="side left"></figure>
		<figure class="side right"></figure>
	</div>
</div>

script.js

var props = 'transform WebkitTransform MozTransform'.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;				
			break;
		
		case 39: // right
			yAngle += 90;
			break;
			
		case 40: // down
			xAngle -= 90;
			break;
	};
	document.getElementById('cube').style[prop] = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
});

style.scss

@import "compass";
body {
  background: #2A2A2A;
}

.cube-container {
  margin-top: 7em;
  -webkit-perspective-origin: -400px -400px;
	-moz-perspective-origin: -400px -400px;
}

#cube {
	-webkit-transform: rotatex(-35deg) rotatey(45deg);
	-moz-webkit-transform:rotatex(-35deg) rotatey(45deg);
	position: relative;
	margin: 0 auto;
	height: 100px;
	width: 100px;
	-webkit-transition: -webkit-transform 2s linear;
	-webkit-transform-style: preserve-3d;
	
	-moz-transition:-webkit-transform 2s linear;
	-moz-transform-style: preserve-3d;

	.side {
		border: 10px solid #fff;
		height: 80px;
		width: 120px;
		position: absolute; }
	.front {
		-webkit-transform: translateZ(70px);
		-moz-transform: translateZ(70px); }
	.back {
		-webkit-transform: rotateY(180deg) translateZ(70px);
		-moz-transform: rotateY(180deg) translateZ(70px); }
	.left {
		-webkit-transform: rotateY(-90deg) translateZ(70px);
		-moz-transform: rotateY(-90deg) translateZ(70px); }
	.right {
		-webkit-transform: rotateY(90deg) translateZ(70px);
		-moz-transform: rotateY(-90deg) translateZ(70px); }
}