.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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.