Unfolding Cube Recursion

index.pug

mixin tinyCube
	.tiny-cube
		.side.one
			.side.three
				.side.six
					.side.four
					.side.two
					.side.five

mixin cube
	.cube
		.side.one
			.side.three
				.side.six
					.side.four
					.side.two
					.side.five
					+tinyCube

main
	.container
		.surface
			.side
			+cube

style.css

*, *:before, *:after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--cubeSide: 140px;
	--cubeSideSm: calc(var(--cubeSide)/7);
	--dur: 4s;
	--playState: running;
	
	--darkred: #622;
	--yellow: #ff4;
	--teal: #066;
	--trans: rgba(0,0,0,0.3);
}
body {
	background: #333;
	height: 100vh;
	line-height: 1.5;
}
main {
	background: var(--yellow);
	margin: 3em auto 0 auto;
	overflow: hidden;
	position: relative;
	width: 480px;
	height: 480px;
}
.container {
	animation: cameraZoom var(--dur) ease-in-out infinite var(--playState);
}
.container, .side {
	width: 100%;
	height: 100%;
}
.surface, .cube, .tiny-cube, .side {
	transform-style: preserve-3d;
}
.surface, .cube, .tiny-cube, .side {
	position: absolute;
}
.surface {
	animation: cameraMove var(--dur) ease-in-out infinite var(--playState);
	margin: calc(var(--cubeSide) * -3.5) auto auto calc(var(--cubeSide) * -3.5);
	top: 50%;
	left: 50%;
	width: calc(var(--cubeSide) * 7);
	height: calc(var(--cubeSide) * 7);
	transform: rotateX(45deg) rotateZ(-45deg);
}
.surface > .side {
	box-shadow: 0 0 calc(var(--cubeSide)/5) calc(var(--cubeSide)*0.35) var(--trans), 0 0 calc(var(--cubeSide)/5) calc(var(--cubeSide)*0.35) var(--trans) inset;
	transform: translateY(100%);
}

/* Cubes */
.cube {
	top: calc(50% - var(--cubeSide)/2);
	left: calc(50% - var(--cubeSide)/2);
	width: var(--cubeSide);
	height: var(--cubeSide);
}
.tiny-cube {
	top: calc(50% - var(--cubeSideSm)/2);
	left: calc(50% - var(--cubeSideSm)/2);
	width: var(--cubeSideSm);
	height: var(--cubeSideSm);
}

/* Sides */
.side {
	background: var(--teal);
	box-shadow: 0 0 calc(var(--cubeSide)/28) calc(var(--cubeSide)/20) var(--trans) inset;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}
.one, .six {
	background: var(--yellow);
}
.four, .three, .three > .six {
	transform: rotateX(-90deg);
} 
.four, .three {
	transform-origin: 50% 100%;
}
.two, .five {
	background: var(--darkred);
}
.two {
	transform: rotateY(90deg);
	transform-origin: 100% 50%;
}
.five {
	transform: rotateY(-90deg);
	transform-origin: 0% 50%;
}
.three > .six {
	transform-origin: 50% 0%;
}
.tiny-cube .side {
	box-shadow: 0 0 0 1px var(--trans) inset;
}
.tiny-cube .one {
	box-shadow: none;
}

/* Animate sides */
.cube > .one > .three > .six > .four, .cube > .one > .three > .six {
	animation: fold46 var(--dur) ease-in-out infinite var(--playState);
}
.cube > .one > .three > .six > .two {
	animation: fold2 var(--dur) ease-in-out infinite var(--playState);
}
.cube > .one > .three > .six > .five {
	animation: fold5 var(--dur) ease-in-out infinite var(--playState);
}
.cube > .one > .three {
	animation: fold3 var(--dur) ease-in-out infinite var(--playState);
}

/* Animations */
@keyframes cameraMove {
	from {
		transform: rotateX(45deg) rotateZ(-45deg)
	}
	33% {
		transform: rotateX(45deg) rotateZ(-45deg) translateY(calc(var(--cubeSide) * -1))
	}
	66%, to {
		transform: rotateX(45deg) rotateZ(-45deg) translateY(calc(var(--cubeSide) * -2))
	}
}
@keyframes cameraZoom {
	from, 66% { transform: scale(1,1) }
	to { transform: scale(7,7) }
}
@keyframes fold46 {
	from, 33% { transform: rotateX(-90deg) }
	67%, to { transform: rotateX(-180deg) }
}
@keyframes fold2 {
	from, 33% { transform: rotateY(90deg) }
	67%, to { transform: rotateY(180deg) }
}
@keyframes fold5 {
	from, 33% { transform: rotateY(-90deg) }
	67%, to { transform: rotateY(-180deg) }
}
@keyframes fold3 {
	from { transform: rotateX(-90deg) }
	33%, to { transform: rotateX(-179.9deg) }
}

unfolding-cube-recursion.markdown

Unfolding Cube Recursion

Man, there’s gotta be some super tiny legendary thing in all those cubes…

Definitely no IE support; hard use of CSS 3D and variables.

A Pen by Jon Kantner on CodePen.

License.