this repo has no description
Add README and image
+79
+79
README.md
+79
README.md
···
1
+
# Isometric CSS cuboids?!
2
+
This 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
+
8
+
And 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
+
72
+
And presto:
73
+
74
+
75
+
76
+
## Notes
77
+
This repo uses  to provide a "paint-by-click" grid. This is live [here](https://kettek.net/s/isocubes/).
78
+
79
+
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.
cube.png
cube.png
This is a binary file and will not be displayed.