- var blocks = 82;

.container
  .surface
    - for (var b = 1;b <= blocks;++b) {
      div(class="block b" + b)
        .block-outer
          .block-inner
            .left
            .front
            .right
            .top
    - }

$sqSize: 16px;
$contW: 100%;
$contH: 100%;
$xSpaces: 33;
$ySpaces: 33;
$zSpaces: 4;
$xAngle: 54.75deg;
$zAngle: 45deg;
$dur: 6s;

// * Block placement *
// parameters: x-pos,y-pos,z-pos, width,depth,height, color
$blocks:
  // base
  (1,2,1, 1,32,1)
  (1,1,1, 33,1,1)
  (2,5,1, 3,1,1)
  (5,2,1, 1,4,1)
  (2,9,1, 7,1,1)
  (9,2,1, 1,8,1)
  (2,13,1, 3,1,1)
  (5,10,1, 1,4,1)
  (10,5,1, 3,1,1)
  (13,2,1, 1,4,1)
  (2,17,1, 15,1,1)
  (17,2,1, 1,16,1)
  (2,21,1, 3,1,1)
  (5,18,1, 1,4,1)
  (18,5,1, 3,1,1)
  (21,2,1, 1,4,1)
  (2,25,1, 7,1,1)
  (9,18,1, 1,8,1)
  (18,9,1, 7,1,1)
  (25,2,1, 1,8,1)
  (2,29,1, 3,1,1)
  (5,26,1, 1,4,1)
  (10,21,1, 3,1,1)
  (13,18,1, 1,4,1)
  (18,13,1, 3,1,1)
  (21,10,1, 1,4,1)
  (26,5,1, 3,1,1)
  (29,2,1, 1,4,1)
  
  // columns
  (5,1,2, 1,1,2)
  (5,5,2, 1,1,2)
  (5,9,2, 1,1,2)
  (5,13,2, 1,1,2)
  (5,17,2, 1,1,2)
  (5,21,2, 1,1,2)
  (5,25,2, 1,1,2)
  (5,29,2, 1,1,2)
  (9,1,2, 1,1,2)
  (9,9,2, 1,1,2)
  (9,17,2, 1,1,2)
  (9,25,2, 1,1,2)
  (13,1,2, 1,1,2)
  (13,5,2, 1,1,2)
  (13,17,2, 1,1,2)
  (13,21,2, 1,1,2)
  (17,1,2, 1,1,2)
  (17,17,2, 1,1,2)
  (21,1,2, 1,1,2)
  (21,5,2, 1,1,2)
  (21,9,2, 1,1,2)
  (21,13,2, 1,1,2)
  (25,1,2, 1,1,2)
  (25,9,2, 1,1,2)
  (29,1,2, 1,1,2)
  (29,5,2, 1,1,2)
  (33,1,2, 1,1,2)
  
  // tops of columns
  (5,1,4, 1,1,1)
  (5,5,4, 1,1,1)
  (5,9,4, 1,1,1)
  (5,13,4, 1,1,1)
  (5,17,4, 1,1,1)
  (5,21,4, 1,1,1)
  (5,25,4, 1,1,1)
  (5,29,4, 1,1,1)
  (9,1,4, 1,1,1)
  (9,9,4, 1,1,1)
  (9,17,4, 1,1,1)
  (9,25,4, 1,1,1)
  (13,1,4, 1,1,1)
  (13,5,4, 1,1,1)
  (13,17,4, 1,1,1)
  (13,21,4, 1,1,1)
  (17,1,4, 1,1,1)
  (17,17,4, 1,1,1)
  (21,1,4, 1,1,1)
  (21,5,4, 1,1,1)
  (21,9,4, 1,1,1)
  (21,13,4, 1,1,1)
  (25,1,4, 1,1,1)
  (25,9,4, 1,1,1)
  (29,1,4, 1,1,1)
  (29,5,4, 1,1,1)
  (33,1,4, 1,1,1)
  ;
$bkColor: #5785f6;

@mixin placeBlock($args) {
  $defaultArgs: 1 1 1 1 1 1 $bkColor;
  $givenArgs: ();
  
  @for $a from 1 through length($defaultArgs) {
    @if $a <= length($args) {
      $givenArgs: append($givenArgs, nth($args,$a), space);
    } @else {
      $givenArgs: append($givenArgs, nth($defaultArgs, $a), space);
    }
  }

  $x: nth($givenArgs,1);
  $y: nth($givenArgs,2);
  $z: nth($givenArgs,3);
  $w: nth($givenArgs,4);
  $d: nth($givenArgs,5);
  $h: nth($givenArgs,6);
  $c: nth($givenArgs,7);
  
  display: inherit;
  transform: translate3d(
    1em*($x - 1),
    1em*(-$y - ($d - 1)),
    (1em*$z) + (1em*($h - 1))
  );
  .block-inner div {
    background-color: $c;
    &.top, &.bottom {
      @if $w > 1 {
        width: 1em * $w;
      }
      @if $d > 1 {
        height: 1em * $d;
      }
    }
    &.top {
      transform: rotateX(-90deg) translateY(-1em*($d - 1));
    }
    &.bottom {
      transform: rotateX(-90deg) translateY(-1em*($d - 1)) translateZ(1em*$h);
    }
    &.front, &.back {
      @if $w > 1 {
        width: 1em * $w;
      }
      @if $h > 1 {
        height: 1em * $h;
      }
    }
    &.front {
      transform: translateZ(1em * ($d - 1));
    }
    &.left, &.right {
      @if $d > 1 {
        width: 1em * $d;
      }
      @if $h > 1 {
        height: 1em * $h;
      }
    }
    &.right {
      transform: rotateY(-270deg) translate3d(1em, 0, 1em*($w - $d));
    }
  }
}

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-size: $sqSize;
  height: 100vh;
  margin: 0;
}
.container {
  background: #87a9f9;
  display: flex;
  margin: auto;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: $contW;
  height: $contH;
  transform-style: preserve-3d;
}
.surface {
  animation: reveal $dur linear infinite;
  display: block;
  width: 1em * $xSpaces;
  height: 1em * $ySpaces;
  margin: auto;
  transform-style: preserve-3d;
  transform: translateY((1em * $zSpaces) * 0.25) rotateX($xAngle) rotateZ($zAngle) translate(5em,-5em);
  will-change: transform;
}
.block {
  display: none;
  transform-style: preserve-3d;
  position: absolute;
  bottom: 0;
}
.block-inner > div {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  position: absolute;
  width: 1em;
  height: 1em;
  &.front, &.back, &.left, &.right {
    &:before {
      background-color: #000;
      content: "";
      width: 100%;
      height: 100%;
    }
  }
  &.front, &.back {
    &:before {
      opacity: 0.2;
    }
  }
  &.left, &.right {
    &:before {
      opacity: 0.4;
    }
  }
}
.block-outer, .block-inner {
  position: relative;
  width: 1em;
  transform-style: preserve-3d;
}
.block-inner {
  transform: rotateX(-90deg) translateZ(1em);
}
.back {
  transform: translateZ(-1em) rotateY(180deg);
}
.left {
  transform-origin: center left;
  transform: rotateY(270deg) translateX(-1em);
}
.right {
  transform-origin: top right;
}
.top, .bottom {
  transform-origin: top center;
}

// * Render blocks *
// one block only
@if length(nth($blocks,1)) == 1 {
  .b1 {
    @include placeBlock($blocks);
  }
}
// more than one block
@else {
  @for $b from 1 through length($blocks) {
    .b#{$b} {
      @include placeBlock(nth($blocks, $b));
    }
  }
}

// * Exceptions (for parts of blocks) *
.block:nth-child(n + 56) {
  .top, .left {
    display: none;
  }
  .front, .front:before {
    background-color: transparent;
  }
  .front {
    background-image: linear-gradient(-45deg,$bkColor 50%,transparent 50%);
    &:before {
      background-image: linear-gradient(-45deg,#000 50%,transparent 50%);
    }
  }
}
.block:nth-child(n + 56):nth-child(-n + 62),
.block:nth-child(68),
.block:nth-child(70),
.block:nth-child(n + 74):nth-child(-n + 76),
.block:nth-child(80) {
  .right, .right:before {
    background-color: transparent;
  }
  .right {
    background-image: linear-gradient(45deg,$bkColor 50%,transparent 50%);
    &:before {
      background-image: linear-gradient(45deg,#000 50%,transparent 50%);
    }
  }
}

// * Animation *
@keyframes reveal {
  from, 45%, to {
    transform: translateY((1em * $zSpaces) * 0.25) rotateX($xAngle) rotateZ($zAngle) translate(5em,-5em);
  }
  65%, 80% {
    transform: translateY((1em * $zSpaces) * 0.25) rotateX($xAngle) rotateZ($zAngle - 90) translate(5em,-5em);
  }
}