.assembly
	- 20.times do
		.cube
			- 6.times do
				.cube__face
View Compiled
$l: 2.5em;
$c: orange;
$n: 20;

body {
	overflow: hidden;
	margin: 0;
	height: 100vh;
	perspective: 20em;
	font-size: 5vmin;
}

div { position: absolute; }

.assembly {
	top: 50%; left: 50%;
	transform-style: preserve-3d;
	animation: r 16s linear infinite
}

@keyframes r { to { transform: rotateY(1turn); } }

.cube {
	transform-style: preserve-3d;
	
	@for $i from 0 to $n {
		$x: (-3.25 + .1*random(65))*$l;
		$y: (-3.25 + .1*random(65))*$l;
		$z: (-3.25 + .1*random(65))*$l;
		$f: (.5 + .1*random(20));
		$a: random(360)*1deg;
		
		&:nth-child(#{$i + 1}) {
			transform: translate3d($x, $y, $z)
				scale3d($f, $f, $f);
			-webkit-filter: hue-rotate($a);
							filter: hue-rotate($a);
		}
	}
	
	&__face {
		margin: -.5*$l;
		width: $l; height: $l;
		box-shadow: inset 0 0 1px;
		background: radial-gradient(mix(#fff, $c), $c);
		
		@for $i from 0 to 6 {
			&:nth-child(#{$i + 1}) {
				transform: if($i < 4, rotateY($i*90deg), 
						rotateX(pow(-1, $i)*90deg)) 
					translateZ(.5*$l)
			}
		}
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.