3D cube

dabblet.css

/**
 * 3D cube
 */

#cube {
	position:relative;
	background:#ccc;
	width:300px;
	height:300px;
	margin:0 auto;
	perspective: 200px;
}
input:checked ~ #cube>section>section{
	backface-visibility: hidden;
}
#cube > section {
	position:absolute;
	left:50%;
	top:50%;
	display: block;
	transform: rotateX(-30deg) rotateY(45deg);
	transform-style: preserve-3d;
	transition:transform 1s;
}
#cube > section:after {
	content:'';
	display:block;
	width:4px;
	height:4px;
	background:red;
	position:absolute;
	top:-2px;
	left:-2px;
	transform-origin: center;
}

#cube:hover > section{
		transform: rotateX(30deg) rotateY(360deg);
}

#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:25px;
	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</label>
<div id="cube"><!--3D scene-->
	<section><!--the cube-->
		<section>1</section><!--{{each facet-->
		<section>2</section>
		<section>3</section>
		<section>4</section>
		<section>5</section>
		<section>6</section><!--}}-->
	</section>
</div>

settings.json

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