.container
	.layer.layer--bread
	.layer.layer--lettuce
	.layer.layer--tomato
	.layer.layer--cheese
	.layer.layer--patty
	.layer.layer--onion
	.layer.layer--bread


View Compiled
$layerHeight: 20px;
$layerSpace: 5px;
$layerSize: 200px;

@mixin layer($color, $heightScale: 1) {
	$height: $heightScale * $layerHeight;
	$darkColor: darken($color, 10%);
	
	margin-bottom: -$layerSize + $height + $layerSpace;
	background: $color;
		
	&:before {
		width: $height;
		background: $darkColor;
	}
	
	&:after {
		height: $height;
		background: $darkColor;
	}
}

body {
	background: #5ABCDC;
}

.container {
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	width: $layerSize;
}

.layer {
	position: relative;
	width: $layerSize;
	height: $layerSize;
	margin-bottom: -$layerSize + $layerHeight + $layerSpace;
	background: #555;
	transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
	transform-style: preserve-3d;
	transition: margin 0.4s;
	
	&:hover {
		margin-bottom: -$layerSize + 2 * ($layerHeight + $layerSpace);
		margin-top: 2 * ($layerHeight + $layerSpace);
	}
	
	@for $i from 1 through 10 {
		&:nth-child(#{$i}) {
			$delay: 0.7 - $i * 0.1s;
			animation: hideDelay $delay, drop 1s $delay;
			z-index: 20 -$i;
		}
	}
	
	&:before,
	&:after {
		content: '';
		display: block;
		position: absolute;
		background: rgb(20, 20, 50);
	}
	
	&:before {
		height: 100%;
		width: $layerHeight;
		left: 0;
		top: 0;
		transform: rotateY(90deg);
		transform-origin: 0 50%;
	}
	
	&:after {
		width: 100%;
		height: $layerHeight;
		left: 0;
		bottom: 0;
		transform: rotateX(90deg);
		transform-origin: 0 100%;
	}
	
	&--bread {
		@include layer(#F4DAB6, 1.5);
	}
	
	&--onion {
		@include layer(#C390D6, 0.8);
	}
	
	&--lettuce {
		@include layer(#67BD32, 0.4);
	}
	
	&--patty {
		@include layer(#AC6B1B, 1.2);
	}
	
	&--cheese {
		@include layer(#F3D909, 0.4);
		transform: rotateX(60deg) rotateY(0deg) rotateZ(-20deg);
	}
	
	&--tomato {
		@include layer(#F33A09, 1);
	}
}

@keyframes drop {
	from {
		transform: rotateX(60deg) rotateY(5deg) rotateZ(0deg) translateZ(400px);
		opacity: 0;
	}
	
	50% {
		opacity: 1;
	}
}

@keyframes hideDelay {
	from, to {
		opacity: 0;
	}
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.