Möbius 6hedrons (pure CSS)

index.html

.assembly
	- 24.times do
		.positioner
			.prism
				- 6.times do
					.prism__face

Möbius 6hedrons (pure CSS).markdown

Möbius 6hedrons (pure CSS)

Live coded in 30 minutes on the 11th of August 2015. Uses transform-style: preserve-3d, so it can only work in browsers supporting it. This excludes IE up to and including 11. It's also ugly if CSS filters are not supported. Tested and works in Firefox 39, Chrome 44, 46 (canary)/ Opera 31 beta on Windows 8. Inspiration:

Source.

A Pen by Ana Tudor on CodePen.

License.

style.css

$n-prisms: 24; //same as in DOM
$height: 6.25em;
$base: 1em;
$base-c: #69f #7e4b4c;
$lat-c: #542252 #7e301a;
$radius: 1.625*$height;
$base-angle: 360deg/$n-prisms;
$t: 1.75s;

@mixin mix-me($c, $k) {
	background: mix(nth($c, 1), nth($c, 2), $k);
}

body {
	overflow: hidden;
	margin: 0;
	height: 100vh;
	perspective: 40em;
	background: #000;
}

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

.positioner {
	@for $i from 0 to $n-prisms {
		$curr-angle: $i*$base-angle;
		$k: (1 + cos($curr-angle))*50%;
		
		&:nth-child(#{$i + 1}) {
			transform: rotateY($curr-angle) 
				translateZ($radius) 
				rotateX(70deg);
			
			.prism {
				animation-delay: -$i*$t/$n-prisms;
				
				&__face {
					@include mix-me($lat-c, $k);
					
					&:nth-child(n + 5) {
						@include mix-me($base-c, $k);
					}
				}
			}
		}
	}
}

@keyframes rot {
	75%, 100% { transform: rotateX(-.5turn); }
}

.prism {
	animation: rot $t ease-in-out infinite;
	
	&__face {
		margin: -.5*$height (-.5*$base);
		width: $base; height: $height;
		backface-visibility: hidden;
		
		&:nth-child(n + 5) {
			margin-top: -.5*$base;
			height: $base;
		}
		
		&:nth-child(-n+4):nth-child(2n) {
			$bfix: .7;
			-webkit-filter: brightness($bfix);
			filter: brightness($bfix);
		}
		
		@for $i from 0 to 6 {
			&:nth-child(#{$i + 1}) {
				transform: 
					if($i < 4, 
						rotateY($i*90deg), 
						rotateX(pow(-1, $i)*90deg))
					translateZ(.5*if($i < 4, $base, $height));
			}
		}
	}
}