Cacher is the code snippet organizer for pro developers

$n-dim: 4;
$n: pow($n-dim, 2);
$n-faces: 3;
$c: #fff #a9a9a9 #dcdcdc;
$rot: rotateX(90deg) rotateY(90deg) ();
$edge: 2.75em;
$dist: $edge + .5em;
$t: 1.5s;

html { overflow: hidden; }

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

.cube {
    @for $i from 0 to $n {
        $j: $i%$n-dim;
        $k: floor($i/$n-dim);
        $tx: ($j - .5*($n-dim - 1))*$dist;
        $tz: ($k - .5*($n-dim - 1))*$dist;
        
        &:nth-child(#{$i + 1}) {
            transform: translate3d($tx, 0, $tz);
            
            .squisher {
                animation-delay: 
                    ($j + ($n-dim - 1 - $k))*.05*$t;
            }
        }
    }
    
    &__face {
        margin: -.5*$edge;
        width: $edge; height: $edge;
        
        @for $i from 0 to $n-faces {
            &:nth-child(#{$i + 1}) {
                transform: nth($rot, $i + 1) 
                    translateZ(.5*$edge);
                background: nth($c, $i + 1);
            }
        }
    }
}

.squisher {
    transform-origin: 0 .5*$edge;
    transform: scaleY(0);
    animation: ani $t ease-in-out infinite;
}

@keyframes ani {
    0%, 50%, 100% { transform: scaleY(0); }
    25% { transform: scaleY(.5); }
}

.grid
    - 16.times do
        .cube
            .squisher
                - 3.times do
                    .cube__face