.megabox
	- (1..4*4*4).each do
		.box
			- (1..4).each do
				.face

$total-duration: 4.1s;
$half-pause: 5%;

html, body { height: 100%; }
body { font-size: 30px; overflow: hidden; }

@keyframes megabox
{
	from, #{$half-pause} { transform: rotateX(-35deg) rotateY(-45deg) rotateY(0) rotateZ(0) rotateY(0); }
	#{33% - $half-pause}, #{33% + $half-pause} { transform: rotateX(-35deg) rotateY(-45deg) rotateY(90deg) rotateZ(0) rotateY(0); }
	#{66% - $half-pause}, #{66% + $half-pause} { transform: rotateX(-35deg) rotateY(-45deg) rotateY(90deg) rotateZ(90deg) rotateY(0); }
	#{100% - $half-pause}, to { transform: rotateX(-35deg) rotateY(-45deg) rotateY(90deg) rotateZ(90deg) rotateY(-90deg); }
}
.megabox
{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8em;
	height: 8em;
	margin: -4em 0 0 -4em;
	transform-style: preserve-3d;
	animation: megabox $total-duration cubic-bezier(.62,.06,.44,.88) infinite;
}

.box
{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1em;
	height: 1em;
	transform-style: preserve-3d;
	margin: -.5em 0 0 -.5em;
	@for $x from 0 to 4
	{
		@for $y from 0 to 4
		{
			@for $z from 0 to 4
			{
				$id: $x + 4*$y + 16*$z + 1;
				$base: translate3d(2 * $x - 3em, 2 * $y - 3em, 2 * $z - 3em);
				@keyframes box#{$id}
				{
					from, 66%, to { transform: $base rotateY(0); }
					33% { transform: $base rotateY(90deg); }
				}
				&:nth-child(#{$id})
				{
					animation: box#{$id} $total-duration steps(1) infinite;
				}
			}
		}
	}
}

.face
{
	position: absolute;
	top: 0;
	left: 0;
	width: 1em;
	height: 1em;
	background: #222;
	padding: 1px;
	margin: -1px 0 0 -1px;
	&:nth-child(1) { transform: rotateY(90deg) translateZ(-.5em); }
	&:nth-child(2) { transform: rotateX(90deg) translateZ(-.5em); }
	&:nth-child(3) { transform: rotateY(-90deg) translateZ(-.5em); }
	&:nth-child(4) { transform: rotateX(-90deg) translateZ(-.5em); }
}