.assembly
	- 2.times do
		.cube
			- 6.times do
				.cube__face
View Compiled
$l: 5em;

body {
	overflow: hidden;
	margin: 0;
	height: 100vh;
	perspective: 20em;
	background: #000;
	font-size: 2vmin;
	filter: blur(.25em) contrast(20);
}

div {
	position: absolute;
	transform-style: preserve-3d;
}

.assembly { top: 50%; left: 50%; }

.cube {
	animation: r 13.51s linear infinite;
	
	&:last-child { animation-duration: 7.39s; }
	
	&__face {
		margin: -.5*$l;
		width: $l; height: $l;
		background: black;
		
		@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);
				background: hsl($i*60, 100%, 50%);
			}
		}
	}
}

@keyframes r {
	0% {
		transform: rotateY(0turn) 
			translate(2.75*$l) rotateX(-135deg);
	}
	100% {
		transform: rotateY(1turn) 
			translate(2.75*$l) rotateX(585deg);
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.