[CSS] Use CSS Transforms to Create Configurable 3D Cuboids

In this lesson, we use CSS transforms to create configurable 3D cuboids.

Using CSS transforms in combination with scoped CSS variables, we are able to configure the height, width, and depth for cuboids without ever having to repeat those styles.

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background: hsl(210, 50%, 20%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  perspective: 800px;
}

.cuboid {
  --width: 10vmin;
  --height: 20vmin;
  --depth: 30vmin;
  height: var(--height);
  width: var(--width);
  position: relative;
  transform: rotateX(24deg) rotateY(32deg);
  transform-style: preserve-3d;
}

.cuboid__side {
  background-color: hsla(0, 0%, 100%, 0.2);
  border: 1px solid hsl(0, 0%, 10%);
  position: absolute;
}

.cuboid__side:nth-of-type(1),
.cuboid__side:nth-of-type(2) {
  --coefficient: -0.5;
  height: var(--height);
  width: var(--width);
  transform: translate3d(0, 0, calc(var(--depth) * var(--coefficient)));
}

.cuboid__side:nth-of-type(2) {
  --coefficient: 0.5;
}

.cuboid__side:nth-of-type(3),
.cuboid__side:nth-of-type(4) {
  --rotation: 90deg;
  height: var(--height);
  width: var(--depth);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotateY(var(--rotation)) translate3d(0, 0, calc(var(--width) * -0.5));
}

.cuboid__side:nth-of-type(4) {
  --rotation: -90deg;
}

.cuboid__side:nth-of-type(5),
.cuboid__side:nth-of-type(6) {
  --rotation: -90deg;
  height: var(--depth);
  width: var(--width);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotateX(var(--rotation)) translate3d(0, 0, calc(var(--height) * -0.5));
}

.cuboid__side:nth-of-type(6) {
  --rotation: 90deg;
}

.cuboid:nth-of-type(2) {
  --width: 5vmin;
  --height: 15vmin;
  --depth: 10vmin;
}