- var nt = 10, nf = 5;

style
	- for(var j = 0; j < nf - 1; j++)
		- if(j !== 1)
			| .face:nth-child(#{j + 1}) { --m: #{j} }
.a3d(style=`--nt: ${nt}; --q: ${nt - 1}`)
	- for(var i = 0; i < nt; i++) {
		.tile(style=`--id: ${i}`)
			- for(var j = 0; j < nf; j++)
				.face
	- }
View Compiled
$c: #e2cbb1 #9da7c1 #a76774;
$t0: 2s;
$f: .1;
$l: 8em/$f;
$n: length($c);
$t1: $n*$t0;
$h: calc(#{$l}/(1 + var(--j)*var(--q)));
$z: calc(#{.5*$l}/(1 + var(--i)*var(--q)));

body { background: #584f50 }

div, :before, :after { position: absolute }

div { transform-style: preserve-3d }

.a3d {
	top: 50%; left: 50%;
	--ini: scale3d(#{$f}, #{$f}, #{$f}) rotatex(-35deg) rotatey(-45deg);
	transform: var(--ini) rotatey(90deg);
	animation: r $t1 steps(1) infinite
}

@keyframes r {
	#{100%/$n} { transform: var(--ini) rotatex(-90deg) }
	#{200%/$n} { transform: var(--ini) rotatez(90deg) }
}

.tile {
	--p: calc(var(--id)/var(--q));
	margin-top: calc((var(--id) - .5*var(--q))*#{$l}/var(--nt));
	animation: a $t0 cubic-bezier(var(--p), 0, calc(1 - var(--p)), 1) infinite
}

@keyframes a { 0% { transform: rotatey(.5turn); } }

.face {
	--i: 0;
	--j: calc(1 - var(--i));
	margin: calc(-.5*#{$h}) -.5*$l;
	width: $l; height: $h;
	transform: rotate3d(var(--i), var(--j), 0, calc(var(--m, 1)*90deg)) translatez($z);
	background: nth($c, 1);
	
	&:nth-child(2n) { --tf: 1 }
	
	&:last-child {
		--i: 1;
		--tf: 2
	}
	
	&:before, &:after {
		top: 0; right: 0; bottom: 0; left: 0;
		background: nth($c, 2);
		animation: f $t1 steps(1) calc((var(--tf, 0) - var(--tl, 1) - #{$n})*#{$t0}) infinite;
		content: ''
	}
	
	&:after {
		--tl: 0;
		background: nth($c, 3)
	}
}

@keyframes f { #{100%/$n} { opacity: 0 } }

External CSS

  1. https://codepen.io/thebabydino/pen/evPbxv.scss

External JavaScript

  1. https://codepen.io/thebabydino/pen/evPbxv.js