Smiling dice

dabblet.css

/**
 * Smiling dice
 * http://dabblet.com/gist/3299972
 */

html{
	background: #333;
	color: white;
}
#cube {
	position:relative;
	background: #222;
	background-image: 
		linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
		linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
	background-size:30px 30px;
	background-position:0 0, 15px 15px;
	perspective: 200px;
	width:300px;
	height:300px;
	margin:0 auto;
	perspective-origin:50% 50%;
	border:15px solid #111;
}
input:checked ~ #cube > section > section{
	backface-visibility: hidden;
}

input:checked ~ #cube > section:after{
	display:none;
}

#cube > section {
	position:absolute;
	left:50%;
	top:50%;
	display: block;
	transform: rotateX(-30deg) rotateY(30deg) rotatez(-360deg);
	transform-style: preserve-3d;
	transition:transform 1s;
}
#cube > section:after {
	content:":'(";
	text-align:center;
	line-height:50px;
	font-size:25px;
	font-family:sans-serif;
	font-weight:bold;
	display:block;
	width:50px;
	height:50px;
	background:green;
	border-radius:100px;
	position:absolute;
	top:-25px;
	left:-25px;
	transform-origin: center;
	transform:rotate(90deg);
}

#cube:hover > section:after {
	content:': )';

}

#cube:hover > section{
		transform: rotateX(20deg) rotateY(325deg) rotatez(0deg);
}

#cube > section > section {
	position:absolute;
	top:-50px;
	left:-50px;
	width: 100px; 
	height: 100px;
	box-sizing:border-box;
	border: 5px solid rgba(255,255,255,.7);
	border-radius:0px;
	background: hsla(220,20%,50%,.5); 
	color: white; 
	font-size: 70px; 
	text-align: center;
	transform-origin: center;
}

#cube > section > section:nth-child(1) {	
	transform: rotatey(0deg)  translateZ(50px);
}
#cube > section > section:nth-child(2) {	
	transform: rotatey(90deg) translateZ(50px);
}
#cube > section > section:nth-child(3) {	
	transform: rotatex(-90deg) translateZ(50px);
}
#cube > section > section:nth-child(4) {	
	transform: rotatex(90deg) translateZ(50px);
}
#cube > section > section:nth-child(5) {	
	transform: rotatey(-90deg) translateZ(50px);
}
#cube > section > section:nth-child(6) {
	transform: rotatey(180deg) translateZ(50px);
}

dabblet.html

<input type="checkbox" id="cb"> <label for='cb'> hide backface &amp; smiley</label>
<div id="cube">
	<section>
		<section>1</section>
		<section>2</section>
		<section>3</section>
		<section>4</section>
		<section>5</section>
		<section>6</section>
	</section>
</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}