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

*,
*: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;
}