this repo has no description
1# Isometric CSS cuboids?!
2This is a hacky thing just because I wanted to see how it if could do work. In short, you declare the following HTML:
3
4```html
5<div class='isocube' style='--x: 20; --y: 10; --color: #ff00ff'></div>
6```
7
8And use the following CSS:
9
10```css
11:root {
12 --darken: black 30%;
13 --lighten: white 30%;
14}
15
16@property --color {
17 syntax: "<color>";
18 inherits: true;
19 initial-value: #c0ffee;
20}
21
22@property --size {
23 syntax: "<length>";
24 inherits: true;
25 initial-value: 32px;
26}
27
28@property --x {
29 syntax: "<integer>";
30 inherits: true;
31 initial-value: 0;
32}
33
34@property --y {
35 syntax: "<integer>";
36 inherits: true;
37 initial-value: 0;
38}
39
40.isocube {
41 background-color: var(--color);
42 position: absolute;
43 width: var(--size);
44 height: var(--size);
45 left: calc(calc(var(--x) - var(--y)) * calc(var(--size) * 0.84));
46 top: calc(calc(var(--x) + var(--y)) * calc(var(--size) * 0.5));
47 transform: rotate(210deg) skewX(-30deg) scaleY(0.86603);
48}
49
50.isocube::before {
51 content: '';
52 position: absolute;
53 background-color: color-mix(in oklab, var(--color), var(--darken));
54 width: 100%;
55 height: 100%;
56 transform-origin: 0 0;
57 transform: scaleY(1.13397) skewX(30deg) rotate(-210deg) rotate(-30deg) skewX(-30deg) scaleY(0.86603);
58}
59
60.isocube::after {
61 content: '';
62 position: absolute;
63 background-color: color-mix(in oklab, var(--color), var(--lighten));
64 width: 100%;
65 height: 100%;
66 transform-origin: 0 0;
67 transform: scaleY(1.13397) skewX(30deg) rotate(-210deg) rotate(90deg) skewX(-30deg) scaleY(0.86603);
68}
69
70```
71
72And presto:
73
74
75
76## Notes
77This repo uses  to provide a "paint-by-click" grid. This is live [here](https://kettek.net/s/isocubes/).
78
79An 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.