Rubik's thingy

dabblet.css

/**
 * Rubik's thingy
 */


* {
padding:0;
margin:0;
transition: all 1s ease;
}

#container {
width:500px;
margin-left:-250px;
height:400px;
margin-top:-200px;
top: 50%;
left: 50%;
position:absolute;
perspective:1000px;
transform-origin:50% 50%;
perspective-origin: 50% 50%;
}

#cube {
width:100%;
height: 100%;
transform-style: preserve-3d;
}

#cube > div {
transform-style: preserve-3d;
width:100%;
height:100%;
position:absolute;
}
figure {
display:block;
border:1px solid black;
position:absolute;
}
#top {
top:0;
left:0;
transform: translateZ(-250px) rotateY(90deg);
}
#bottom {
top:300px;
left:0;
transform: translateZ(-250px) rotateY(0deg);
}
#top figure, #bottom figure {
width: 100%;
height: 100px;
}
#top .front, #bottom .front {
transform: rotateY(0deg) translateZ(250px);
}
#top .back, #bottom .back {
transform: rotateY(180deg) translateZ(250px);
}
#top .left, #bottom .left {
transform: rotateY(-90deg) translateZ(250px);
}
#top .right, #bottom .right {
transform: rotateY(90deg) translateZ(250px);
}

#left figure, #right figure {
width:150px;
height:100%;
}
#left {
top:0;
left:0;
transform: translateZ(-200px) rotateX(0deg);
}
#right {
top:0;
left:350px;
transform: translateZ(-200px) rotateX(0deg);
}
#left .front, #right .front {
transform: rotateX(0deg) translateZ(200px);
}
#left .back, #right .back {
transform: rotateX(180deg) translateZ(200px);
}
#left .top, #right .top {
transform: rotateX(-90deg) translateZ(200px);
}
#left .bottom, #right .bottom{
transform: rotateX(90deg) translateZ(200px);
}

dabblet.html

<div id="container">
	<div id="cube">
		<div id="top">
			<figure class="front">top 1</figure>
			<figure class="left">top 2</figure>
			<figure class="back">top 3</figure>
			<figure class="right">top 4</figure>
		</div>
		
		<div id="bottom">
			<figure class="front">bottom 1</figure>
			<figure class="left">bottom 2</figure>
			<figure class="back">bottom 3</figure>
			<figure class="right">bottom 4</figure>
		</div>
		
		<div id="left">
			<figure class="front">left 1</figure>
			<figure class="top">left 2</figure>
			<figure class="back">left 3</figure>
			<figure class="bottom">left 4</figure>
		</div>
		
		<div id="right">
			<figure class="front">right 1</figure>
			<figure class="top">right 2</figure>
			<figure class="back">right 3</figure>
			<figure class="bottom">right 4</figure>
		</div>
	</div>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}