exploded-view.css

/* From https://www.redblobgames.com/making-of/line-drawing/
 * Copyright 2017 Red Blob Games <redblobgames@gmail.com>
 * CSS for the "exploded view" of the layers in a diagram
 */

.layer {
    transition: transform 2s;
    transform: none;
}
.rotated .layer-0 { transform: translate(40px,190px) rotateX(60deg) rotateZ(-30deg) scale(0.8); }
.rotated .layer-1 { transform: translate(40px,170px) rotateX(60deg) rotateZ(-30deg) scale(0.8); }
.rotated .layer-2 { transform: translate(40px,150px) rotateX(60deg) rotateZ(-30deg) scale(0.8); }
.rotated .layer-3 { transform: translate(40px,130px) rotateX(60deg) rotateZ(-30deg) scale(0.8); }
.rotated .layer-4 { transform: translate(40px,110px) rotateX(60deg) rotateZ(-30deg) scale(0.8); }
.rotated .layer-5 { transform: translate(40px, 90px) rotateX(60deg) rotateZ(-30deg) scale(0.8); }

/* Each layer will have a "glass" <rect> underneath its contents */
.layer .glass {
    pointer-events: none;
    transition: opacity 2s;
    opacity: 0.0;
    fill: hsl(120,10%,90%);
    fill-opacity: 0.25;
    stroke: hsl(120,50%,20%);
    stroke-opacity: 0.75;
    stroke-width: 2px;
}
.rotated .layer .glass {
    opacity: 1.0;
}