.assembly
	- 5.times do
		.bar
			- 4.times do
				.face
View Compiled
$c: #7ed6be #ecf081 #ffbe40 #ef746f #bc8696;
$n: length($c);
$dc: 2 0 1 3;
$sf: 1 2 2.3 2.5 2.9;
$l: 5em;
$t: 8s;

body {
	overflow: hidden;
	margin: 0;
	height: 100vh;
	perspective: 65em;
	perspective-origin: 50% calc(50% - #{5*$l});
	background: #000;
}

div {
	position: absolute;
	top: 50%; left: 50%;
	transform-style: preserve-3d;
}

.assembly {
	transform: rotateY(50deg)
		translate3d(0, -2*$l, $l);
	animation: move $t linear infinite;
}

@keyframes move {
	to {
		transform: rotateY(-30deg) 
			translate3d(0, $l, 0);
	}
}

.bar {
	transform-origin: 0 .5*$l 0;
	animation: grow $t cubic-bezier(.19, 1, .23, 1) infinite;
	
	@for $i from 0 to $n {
		&:nth-child(#{$i + 1}) {
			margin-left: 1.5*($i - .5*($n - 1))*$l;
			transform: scaleY(nth($sf, $i + 1));
			color: nth($c, $i + 1);
		}
	}
}

@keyframes grow {
	0% { transform: scaleY(0); }
}

.face {
	margin: -.5*$l;
	width: $l; height: $l;
	backface-visibility: hidden;
	background: currentColor;
	
	&:nth-child(n + 2):before {
		position: absolute;
		top: 100%; left: 0;
		width: inherit; height: inherit;
		opacity: .1;
		background: inherit;
		content: '';
	}
	
	@for $i from 0 to 4 {
		$j: min($i, 1);
		$a: (1 - $j + $j*($i - 2))*90deg;
		$f: 1 - nth($dc, $i + 1)*.15;
		
		&:nth-child(#{$i + 1}) {
			transform: 
				rotate3d(1 - $j, $j, 0, $a) 
				translateZ(.5*$l);
			-webkit-filter: brightness($f);
			filter: brightness($f);
		}
	}
}
View Compiled
Rerun