blocks (no JS)

blocks (no JS).markdown

blocks (no JS)

Inspiration.

A Pen by Ana Tudor on CodePen.

License.

index.html

.assembly
	- 4.times do
		.size
			.position
				- 4.times do
					.lateral

style.css

$n: 4; // must be the same as number of blocks
$l: 25vmin;
$h: 5vmin;
$t: 2s;
$p: 50;

@function hypot($a, $b: $a) {
	@return sqrt(pow($a, 2) + pow($b, 2));
}

@mixin pos($w, $h: $w) {
	margin: -$h/2 if($w != $h, -$w/2, ());
	width: $w; height: $h;
}

html, body { height: 100%; }

body {
	overflow: hidden;
	margin: 0;
	perspective-origin: 50% calc(50% - 32em);
	perspective: 64em;
}

.assembly {
	&, *, :before, :after {
		position: absolute;
		top: 50%; left: 50%;
		transform-style: preserve-3d;
	}
	
	transform: rotateY(45deg);
}

.size {
	@for $i from 0 to $n {
		$f: $i + 1;
		
		&:nth-child(#{$i + 1}) {
			@if $i > 0 {
				animation: size#{$i + 1} $t linear infinite;
				
				@at-root {
					@keyframes size#{$i + 1} {
						@for $j from 1 to $p {
							$cl: 1;
							$pl: $cl;
							
							@for $k from 0 to $i {
								$pl: $pl*hypot($j/$p, ($p - $j)/$p);
							}
							
							#{$j*100%/$p} {
								transform: scale3d($pl, 1, $pl);
							}
						}
					}
				}
			}
			
			.position {
				margin-top: (.5*($n - 1) - $i)*$h*1.01;
				animation-duration: $t/$f;
			}
		}
	}
}

.position {
	animation: rot $t linear infinite;
	
	&:before {
		@include pos($l);
		backface-visibility: hidden;
		box-shadow: inset 0 0 1px darkgrey;
		background: whitesmoke;
		content: '';
	}

	&:before {
		transform: rotateX(90deg) 
			translateZ(.5*$h);
	}
}

.lateral {
	@include pos($l, $h);
	backface-visibility: hidden;
	background: gainsboro;

	&:after {
		@include pos($l, $h);
		backface-visibility: hidden;
		box-shadow: 0 0 1px darkgrey;
		background: inherit;
		content: ''
	}

	@for $i from 0 to 4 {
		&:nth-child(#{$i + 1}) {
			transform: rotateY($i*90deg) 
				translateZ(.5*$l);

			@if $i == 0 {
				animation: inherit;
				animation-name: null;

				&:after {
					animation: inherit;
					animation-name: shade;
				}
			}
			@if $i == 3 {
				&:after { background: silver; }
			}
		}
	}
}

@keyframes rot { 
	to { transform: rotateY(-90deg); }
}

@keyframes shade { to { background: silver; } }