Трехмерный куб на CSS3

<div id="wrapper">
	<div id="cube" class="animate">
		<div class="side" id="side1">1</div>
		<div class="side" id="side2">2</div>
		<div class="side" id="side3">3</div>
		<div class="side" id="side4">4</div>
		<div class="side" id="side5">5</div>
		<div class="side" id="side6">6</div>
	</div>
</div>

#wrapper {
	perspective: 900px;
	max-width: 400px;
	margin: 150px auto;
}
#cube {
	position: relative;
	width: 300px;
	height: 300px;
	transform-origin: 50% 50% -150px;
	transform-style: preserve-3d;
	transform: rotate3d(1,1,1,160deg);
	will-change: transform;
}
.side{
	width: 300px;
	height: 300px;
	background: rgba(0,0,0,.3);
	background: -moz-radial-gradient(rgba(0,0,0,.1), rgba(0,0,0,.5));
	position: absolute;
	border: 10px solid #567E7D;
	border-radius: 10px;
	font-size: 5em;
	color: #fff;
	line-height: 300px;
	text-align: center;
	text-shadow: 0 1px 3px rgba(0,0,0,.4);
	box-shadow: 0 0 6px rgba(0,0,0,.5);
	transform-origin: 50% 50% -150px;
}
#side2 {
	transform: rotateY(90deg);
}
#side3 {
	transform: rotateY(-90deg);
}
#side4 {
	transform: rotateX(90deg);
}
#side5 {
	transform: rotateX(-90deg);
}
#side6 {
	transform: rotateY(180deg);
}
@keyframes cubeAnimation {
	from {transform: rotate3d(1,1,1,160deg);}
	50% {transform: rotate3d(1,1,1,0deg);}
	75% {transform: rotate3d(1,1,1,360deg);}
	to {transform: rotate3d(1,1,1,160deg);}
}
.animate {
	animation: cubeAnimation 6s infinite linear 2s;
}