.cam.top
.cam.right-top
.cam.right
.cam.right-bot
.cam.bot
.cam.left-bot
.cam.left
.cam.left-top
- for (var i=1; i<19; i++)
  input(type="checkbox" id="row"+i)
.content
  - for (var c=1; c<19; c++)
    .cuboid
      .side
        label(for="row"+c)
      .side
      .side
      .side
        label(for="row"+c)
      .side
      .side
    - for (var cu=0; cu<2; cu++)
      .cuboid
        - for (var s=0; s<6; s++)
          .side

:root {
  --rotation: 0deg;
  --translaY: 0vmin;
  --translaX: 0vmin;
  --translaZ: 0vmin;
}

* {
  transform-style: preserve-3d;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 100vmin;
  background: radial-gradient(circle at 50% 50%, #333, #000);
  /*
  max-width: 90vmin;
  margin: 0 auto;
  */
}

.content {
  width: 30vmin;
  height: 90vmin;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform: rotateX(-15deg) rotateY(45deg) scale3d(0.75,0.75,0.75);
  transition: all 0.5s ease 0s;
}

.cuboid {
  --height: 5;
  --width: 10;
  --depth: 30;
  --hue: 0;
  --sat: 60%;
  height: calc(var(--height) * 1vmin);
  width: calc(var(--width) * 1vmin);
  position: absolute;
  transform: translate3d(0vmin, 0vmin, 0vmin);
  transform: translateX(var(--translaX)) translateY(var(--translaY))
    translateZ(var(--translaZ)) rotateY(var(--rotation));
  transition: --translaZ 1.5s ease 0s, --translaX 1.5s ease 0s;
}

.cuboid .side {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  border-radius: 2px;
}

.cuboid .side:nth-of-type(1) {
  transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
  background: hsl(var(--hue), var(--sat), 60%);
}
.cuboid .side:nth-of-type(2) {
  transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin))
    rotateY(180deg);
  background: hsl(var(--hue), var(--sat), 25%);
}
.cuboid .side:nth-of-type(3) {
  width: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateY(90deg)
    translate3d(0, 0, calc(var(--width) * 0.5vmin));
  background: hsl(var(--hue), var(--sat), 75%);
}
.cuboid .side:nth-of-type(4) {
  width: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateY(-90deg)
    translate3d(0, 0, calc(var(--width) * 0.5vmin));
  background: hsl(var(--hue), var(--sat), 40%);
}
.cuboid .side:nth-of-type(5) {
  height: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateX(90deg)
    translate3d(0, 0, calc(var(--height) * 0.5vmin));
  background: hsl(var(--hue), var(--sat), 75%);
}
.cuboid .side:nth-of-type(6) {
  height: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateX(-90deg)
    translate3d(0, 0, calc(var(--height) * 0.5vmin));
  background: hsl(var(--hue), var(--sat), 20%);
}

/*** colors ***/

.cuboid:nth-child(10n + 2) {
  --hue: 72;
}
.cuboid:nth-child(10n + 3) {
  --hue: 144;
}
.cuboid:nth-child(10n + 4) {
  --hue: 216;
}
.cuboid:nth-child(10n + 5) {
  --hue: 288;
}
.cuboid:nth-child(10n + 6) {
  --hue: 36;
}
.cuboid:nth-child(10n + 7) {
  --hue: 108;
}
.cuboid:nth-child(10n + 8) {
  --hue: 180;
}
.cuboid:nth-child(10n + 9) {
  --hue: 252;
}
.cuboid:nth-child(10n + 10) {
  --hue: 324;
}

/*** positions ***/

/* ROW 1 */
.cuboid:nth-child(2) {
  --translaX: -10vmin;
}

.cuboid:nth-child(3) {
  --translaX: 10vmin;
}

/* ROW 2 */
.cuboid:nth-child(1n + 4) {
  --translaY: -5vmin;
  --width: 30;
  --depth: 10;
}
.cuboid:nth-child(5) {
  --translaZ: -10vmin;
}
.cuboid:nth-child(6) {
  --translaZ: 10vmin;
}

/* ROW 3 */
.cuboid:nth-child(1n + 7) {
  --translaY: -10vmin;
  --depth: 30;
  --width: 10;
}
.cuboid:nth-child(8) {
  --translaX: -10vmin;
}
.cuboid:nth-child(9) {
  --translaX: 10vmin;
}

/* ROW 4 */
.cuboid:nth-child(1n + 10) {
  --translaY: -15vmin;
  --width: 30;
  --depth: 10;
}
.cuboid:nth-child(11) {
  --translaZ: -10vmin;
}
.cuboid:nth-child(12) {
  --translaZ: 10vmin;
}

/* ROW 5 */
.cuboid:nth-child(1n + 13) {
  --translaY: -20vmin;
  --depth: 30;
  --width: 10;
}
.cuboid:nth-child(14) {
  --translaX: -10vmin;
}
.cuboid:nth-child(15) {
  --translaX: 10vmin;
}

/* ROW 6 */
.cuboid:nth-child(1n + 16) {
  --translaY: -25vmin;
  --width: 30;
  --depth: 10;
}
.cuboid:nth-child(17) {
  --translaZ: -10vmin;
}
.cuboid:nth-child(18) {
  --translaZ: 10vmin;
}

/* ROW 7 */
.cuboid:nth-child(1n + 19) {
  --translaY: -30vmin;
  --depth: 30;
  --width: 10;
}
.cuboid:nth-child(20) {
  --translaX: -10vmin;
}
.cuboid:nth-child(21) {
  --translaX: 10vmin;
}

/* ROW 8 */
.cuboid:nth-child(1n + 22) {
  --translaY: -35vmin;
  --width: 30;
  --depth: 10;
}
.cuboid:nth-child(23) {
  --translaZ: -10vmin;
}
.cuboid:nth-child(24) {
  --translaZ: 10vmin;
}

/* ROW 9 */
.cuboid:nth-child(1n + 25) {
  --translaY: -40vmin;
  --depth: 30;
  --width: 10;
}
.cuboid:nth-child(26) {
  --translaX: -10vmin;
}
.cuboid:nth-child(27) {
  --translaX: 10vmin;
}

/* ROW 10 */
.cuboid:nth-child(1n + 28) {
  --translaY: -45vmin;
  --width: 30;
  --depth: 10;
}
.cuboid:nth-child(29) {
  --translaZ: -10vmin;
}
.cuboid:nth-child(30) {
  --translaZ: 10vmin;
}

/* ROW 11 */
.cuboid:nth-child(1n + 31) {
  --translaY: -50vmin;
  --depth: 30;
  --width: 10;
}
.cuboid:nth-child(32) {
  --translaX: -10vmin;
}
.cuboid:nth-child(33) {
  --translaX: 10vmin;
}

/* ROW 12 */
.cuboid:nth-child(1n + 34) {
  --translaY: -55vmin;
  --width: 30;
  --depth: 10;
}
.cuboid:nth-child(35) {
  --translaZ: -10vmin;
}
.cuboid:nth-child(36) {
  --translaZ: 10vmin;
}

/* ROW 13 */
.cuboid:nth-child(1n + 37) {
  --translaY: -60vmin;
  --depth: 30;
  --width: 10;
}
.cuboid:nth-child(38) {
  --translaX: -10vmin;
}
.cuboid:nth-child(39) {
  --translaX: 10vmin;
}

/* ROW 14 */
.cuboid:nth-child(1n + 40) {
  --translaY: -65vmin;
  --width: 30;
  --depth: 10;
}
.cuboid:nth-child(41) {
  --translaZ: -10vmin;
}
.cuboid:nth-child(42) {
  --translaZ: 10vmin;
}



/* ROW 15 */
.cuboid:nth-child(1n+43) {
  --translaY: -70vmin;
  --depth: 30;
  --width: 10;
}
.cuboid:nth-child(44) {
  --translaX: -10vmin;
}
.cuboid:nth-child(45) {
  --translaX: 10vmin;
}



/* ROW 16 */
.cuboid:nth-child(1n+46) {
  --translaY: -75vmin;
  --width: 30;
  --depth: 10;
}
.cuboid:nth-child(47) {
  --translaZ: -10vmin;
}
.cuboid:nth-child(48) {
  --translaZ: 10vmin;
}






/* ROW 17 */
.cuboid:nth-child(1n+49) {
  --translaY: -80vmin;
  --depth: 30;
  --width: 10;
}
.cuboid:nth-child(50) {
  --translaX: -10vmin;
}
.cuboid:nth-child(51) {
  --translaX: 10vmin;
}



/* ROW 18 */
.cuboid:nth-child(1n+52) {
  --translaY: -85vmin;
  --width: 30;
  --depth: 10;
}
.cuboid:nth-child(53) {
  --translaZ: -10vmin;
}
.cuboid:nth-child(54) {
  --translaZ: 10vmin;
}




input {
  display: none;
}
label {
  cursor: pointer;
  display: block;
  width: 100%;
  height: 100%;
}
label:hover {
  background: #fff8;
}

@property --translaZ {
  syntax: "<length>";
  inherits: false;
  initial-value: 0vmin;
}

@property --translaX {
  syntax: "<length>";
  inherits: false;
  initial-value: 0vmin;
}

#row1:checked ~ .content .cuboid:nth-child(1),
#row3:checked ~ .content .cuboid:nth-child(7),
#row5:checked ~ .content .cuboid:nth-child(13),
#row7:checked ~ .content .cuboid:nth-child(19),
#row9:checked ~ .content .cuboid:nth-child(25),
#row11:checked ~ .content .cuboid:nth-child(31),
#row13:checked ~ .content .cuboid:nth-child(37),
#row15:checked ~ .content .cuboid:nth-child(43),
#row17:checked ~ .content .cuboid:nth-child(49) {
  --translaZ: -30vmin;
}

#row2:checked ~ .content .cuboid:nth-child(4),
#row4:checked ~ .content .cuboid:nth-child(10),
#row6:checked ~ .content .cuboid:nth-child(16),
#row8:checked ~ .content .cuboid:nth-child(22),
#row10:checked ~ .content .cuboid:nth-child(28),
#row12:checked ~ .content .cuboid:nth-child(34),
#row14:checked ~ .content .cuboid:nth-child(40),
#row16:checked ~ .content .cuboid:nth-child(46),
#row18:checked ~ .content .cuboid:nth-child(52)  {
  --translaX: 30vmin;
}

.cam {
  position: absolute;
  width: 10vmin;
  height: 10vmin;
  background: #0002;
}

.top {
  top: 0;
}

.bot {
  bottom: 0;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

.top:hover ~ .content {
  transform: rotateX(15deg) rotateY(45deg) scale3d(0.75,0.75,0.75);
}

.bot:hover ~ .content {
  transform: rotateX(-30deg) rotateY(45deg) scale3d(0.75,0.75,0.75);
}

.right:hover ~ .content {
  transform: rotateX(-15deg) rotateY(70deg) scale3d(0.75,0.75,0.75);
}

.left:hover ~ .content {
  transform: rotateX(-15deg) rotateY(20deg) scale3d(0.75,0.75,0.75);
}


.left-top {
  top: 0;
  left: 0;
}

.right-top {
  top: 0;
  right: 0;
}

.right-bot {
  right: 0;
  bottom: 0;
}

.left-bot {
  left: 0;
  bottom: 0;
}

.left-top:hover ~ .content {
  transform: rotateX(15deg) rotateY(20deg) scale3d(0.75,0.75,0.75);
}

.right-top:hover ~ .content {
  transform: rotateX(15deg) rotateY(70deg) scale3d(0.75,0.75,0.75);
}

.right-bot:hover ~ .content {
  transform: rotateX(-30deg) rotateY(70deg) scale3d(0.75,0.75,0.75);
}

.left-bot:hover ~ .content {
  transform: rotateX(-30deg) rotateY(20deg) scale3d(0.75,0.75,0.75);
}

.cam:after {
  content: "";
  position: absolute;
  width: 2vmin;
  height: 2vmin;
  border: 1vmin solid #fff;
  border-color: #fff #fff #fff0 #fff0;
  border-width: 1vmin 1vmin 0 0;
  border-radius: 0.25vmin;
  transform: rotate(-90deg);
  left: 4vmin;
  top: 3.5vmin;
  opacity: 0.15;
}

.cam.top:after {
  transform: rotate(-45deg);
  left: calc(50% - 1.5vmin);
}

.cam.right-top:after {
  transform: rotate(0deg);
  right: 4vmin;
  left: inherit;
}

.cam.right:after {
  transform: rotate(45deg);
  top: calc(50% - 1.5vmin);
  right: 4vmin;
  left: inherit;
}

.cam.right-bot:after {
  transform: rotate(90deg);
  top: calc(100% - 6vmin);
  right: 4vmin;
  left: inherit;
}

.cam.bot::after {
  transform: rotate(135deg);
  left: calc(50% - 1.5vmin);
  top: calc(100% - 6vmin);
}

.cam.left-bot::after {
  transform: rotate(-180deg);
  top: calc(100% - 6vmin);
}

.cam.left:after {
  transform: rotate(-135deg);
  top: calc(50% - 1.5vmin);
}

.cam:hover {
  background: #fff2;
}

.cam:hover:after {
  opacity: 0.75;
}