.container
	- for (let i=0; i<49; i++)
		.tile
			.top
			.front
			.back
			.left
			.right
View Compiled
@import 'compass';

$rows: 7;
$tile-count: $rows * $rows;
$full-size: 32vw;
$gap: 1.2vw;

$tile-color: lighten(desaturate(#14d4ff, 60%), 30%);
$tile-size: ($full-size - $gap * ($rows - 1)) / $rows;
$tile-height: 0.6vw;

$rotate-duration: 30s;
$tile-sway-duration: 3s;
$tile-stagger: 0.25; // seconds
$tile-sway-z-bottom: -8vh;
$tile-sway-z-top: 24vh;


html,
body {
	height: 100%;
}

body {
	background-image: radial-gradient(ellipse at top, #14d4ff 0.0%, #0ab7f9 2.8%, #0b97e8 7%, #1079d4 11.9%, #1460c1 17.5%, #174cae 23.5%, #193b9c 29.8%, #1b2d8a 36.6%, #1c237a 43.6%, #1e1c6a 51%, #231c5b 58.6%, #251a4c 66.4%, #24183f 74.5%, #211632 82.8%, #1c1225 91.3%, #150e1a 100.0%);
	background-size: 260% 100%;
	background-position: 50% 0;
	overflow: hidden;
	
	perspective: calc(460px + 12vw);
	perspective-origin: 50% 5%;
	
	@media (max-width: 750px) {
		background-size: 2000px 100%;
	}
}


.container {
	display: grid;
	grid-template-columns: repeat($rows, 1fr);
	grid-gap: $gap;
	width: $full-size;
	height: $full-size;
	position: absolute;
	top: 50vh;
	left: 50vw;
	transform-style: preserve-3d;
	animation: $rotate-duration linear infinite spin;
}


.tile {
	transform: translateZ($tile-sway-z-bottom);
	transform-style: preserve-3d;
	animation: $tile-sway-duration ease-in-out infinite alternate tile-sway;
	
	.top {
		background-color: $tile-color;
		width: $tile-size;
		height: $tile-size;
	}
	
	.front,
	.back,
	.left,
	.right {
		position: absolute;
		top: 50%;
		width: $tile-size;
		height: $tile-height;
		transform-origin: 50% 0 0;
	}
	
	.front {
		background-color: darken($tile-color, 24%);
		transform: rotateX(-90deg) rotateY(0deg) translateZ($tile-size / 2);
	}
	
	.back {
		background-color: darken($tile-color, 24%);
		transform: rotateX(-90deg) rotateY(180deg) translateZ($tile-size / 2);
	}
	
	.left {
		background-color: darken($tile-color, 14%);
		transform: rotateX(-90deg) rotateY(90deg) translateZ($tile-size / 2);
	}
	
	.right {
		background-color: darken($tile-color, 14%);
		transform: rotateX(-90deg) rotateY(270deg) translateZ($tile-size / 2);
	}
}

@for $i from 0 to $tile-count {
	.tile:nth-child(#{$i + 1}) {
		// Compute tile coordinates, as integers, from center.
		$center-offset: $rows / 2 - 0.5;
		$x: floor($i / $rows) - $center-offset;
		$y: $i % $rows - $center-offset;
		$delay: sqrt($x * $x + $y * $y);
		animation-delay: #{$delay * $tile-stagger}s;
	}
	
}


@keyframes tile-sway {	
	100% {
		transform: translateZ($tile-sway-z-top);
	}
}


@keyframes spin {
	0% {
		transform: translate3d(-50%, -50%, 0) rotateX(-90deg) rotateZ(0deg) scaleZ(-1);
	}
	
	100% {
		transform: translate3d(-50%, -50%, 0) rotateX(-90deg) rotateZ(360deg) scaleZ(-1);
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.