3D cube

dabblet.css

/**
 * 3D cube
 */

body {
	perspective: 99999px;
}

body > section {
	display: inline-block;
	margin: 0 200px;
	transform: rotateX(-30deg) rotateY(45deg);
	transform-origin: left;
	transform-style: preserve-3d;
}

section > section {
	float: left;
	width: 100px; height: 100px;
	border: 1px dashed white;
	background: hsla(220,20%,50%,.5); 
	color: white; 
	font-size: 90px; text-align: center;
	transform-origin: left;
}

section > section:nth-child(2),
section > section:nth-child(6) {
	clear: both;
}

section > section:nth-child(6) {
	float: right;
}

section > section:nth-child(1) {
	transform: rotateX(90deg);
	transform-origin: bottom;
}

section > section:nth-child(3) {
	transform: rotateY(90deg);
}

section > section:nth-child(4) {
	transform: translateZ(-100px) translateX(-200%);	
}

section > section:nth-child(5) {
	transform: translateX(-300%) rotateY(90deg);
}

section > section:nth-child(6) {
	transform-origin: top;
	transform: translateX(-300%) rotateX(90deg) translateY(-100%);
}

dabblet.html

<section>
	<section>1</section>
	<section>2</section>
	<section>3</section>
	<section>4</section>
	<section>5</section>
	<section>6</section>
</section>

settings.json

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