Isometric CSS cuboids?!#

This is a hacky thing just because I wanted to see how it if could do work. In short, you declare the following HTML:

<div class='isocube' style='--x: 20; --y: 10; --color: #ff00ff'></div>

And use the following CSS:

:root {
  --darken: black 30%;
  --lighten: white 30%;
}

@property --color {
  syntax: "<color>";
  inherits: true;
  initial-value: #c0ffee;
}

@property --size {
  syntax: "<length>";
  inherits: true;
  initial-value: 32px;
}

@property --x {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}

@property --y {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}

.isocube {
  background-color: var(--color);
  position: absolute;
  width: var(--size);
  height: var(--size);
  left: calc(calc(var(--x) - var(--y)) * calc(var(--size) * 0.84));
  top:  calc(calc(var(--x) + var(--y)) * calc(var(--size) * 0.5));
  transform: rotate(210deg) skewX(-30deg) scaleY(0.86603);
}

.isocube::before {
  content: '';
  position: absolute;
  background-color: color-mix(in oklab, var(--color), var(--darken));
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  transform: scaleY(1.13397) skewX(30deg) rotate(-210deg) rotate(-30deg) skewX(-30deg) scaleY(0.86603);
}

.isocube::after {
  content: '';
  position: absolute;
  background-color: color-mix(in oklab, var(--color), var(--lighten));
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  transform: scaleY(1.13397) skewX(30deg) rotate(-210deg) rotate(90deg) skewX(-30deg) scaleY(0.86603);
}

And presto:

Notes#

This repo uses to provide a "paint-by-click" grid. This is live here.

An outstanding issue is that we should use implement our own matrix calculations as there seem to be floating point errors occurring due to having to undo/reverse prior CSS transforms. This undo/reverse is because I wanted the HTML syntax to just be a single element, not one for each face of the cube.