axes from pseudo elements¤

making axes from psuedo elements is tricky. compounding rotations complicate them. things get fucked when rotations compound. in this drawing, the row pseudo elements form straight axes while inner psuedo elements can't be aligned at least with this rotation stacking.

adding a counter rotation to straightent he text will cause issues with all the axes. so far the easiest axis technique to pre bin the data into groups and use the heading elements as axis fodder. eg https://tonyfast.github.io/tonyfast/draft/tonyfast/tonyfast/tonyfast/xxiv/2024-08-02-3d-table.html

from nbconvert_a11y.repr import get_table

df = DataFrame(numpy.random.randn(30, 3), None, list("xyz"))
df.iloc[0] *= 0 
df.iloc[-1] = df.iloc[:-1].mean()
section = df.pipe(get_table, id="xyz")
section.table.attrs.update(**{"class": "xyz"})
section

pandas dataframe with 30 rows, 3 columns with 1 index levels and 1 columns levels.
None	'x'	'y'	'z'
0	0.000	0.000	-0.000
1	-2.645	-1.328	0.624
2	-2.347	2.186	-1.150
3	-0.220	0.837	-1.883
4	1.576	-0.827	-0.499
5	0.942	-0.562	0.043
6	-0.384	0.399	1.132
7	1.541	-0.516	-0.889
8	0.529	-0.143	-0.252
9	-0.179	-2.072	-1.715
10	-0.516	-0.117	0.981
11	-0.312	0.055	-1.232
12	1.785	-0.088	0.315
13	1.465	-0.608	0.077
14	-1.476	0.111	-0.712
15	0.151	-0.575	-0.561
16	-0.668	1.164	1.849
17	-1.127	-1.205	0.513
18	0.312	0.710	-0.054
19	-0.318	0.587	-1.060
20	-0.817	0.426	-0.412
21	-0.565	2.390	0.527
22	0.196	-0.825	-1.414
23	-0.893	1.036	-0.521
24	-1.537	0.141	-1.217
25	0.575	-0.941	1.433
26	-0.368	1.630	0.316
27	-1.332	1.422	-0.488
28	1.855	-0.979	-0.197
29	-0.165	0.080	-0.222
min	-2.645	-2.072	-1.883
max	1.855	2.390	1.849
diff	4.500	4.462	3.732

%%

```css
.xyz {
    --cx: 0px;
    --cy: 0px;
    --cz: 0px;
    --t: 2s;
    --rx: 20deg;
    --ry: 15deg;
    --rz: 10deg;
    --w: 600px;
    --h: 400px;
    --d: 400px;
    --distance: 20in;
    --r: 
        rotateX(var(--rx))
        rotateY(var(--ry))
        rotateZ(var(--rz))
        ;
    ---r: 
        rotateZ(calc(-1 * var(--rz)))
        rotateY(calc(-1 * var(--ry)))
        rotateX(calc(-1 * var(--rx)))
        ;
    --_0: calc(-1 * var(--w) * var(--0-min) / var(--0-diff));
    --_1: calc(-1 * var(--h) * var(--1-min) / var(--1-diff));
    --_2: calc(-1 * var(--d) * var(--2-min) / var(--2-diff));
    --center: var(--_0) var(--_1) var(--_2) ;
    --origin: translate3d(var(--_0), var(--_1), var(--_2));
    height: var(--h); width: var(--w);
    tbody {
        font-family: monospace;
        border: dotted;
        display: block;
        position: relative;
        height: var(--h); width: var(--w);
        transform-style: preserve-3d;
        transform-origin: var(--center);
        transform: var(--r);
        tr {
            transform-origin: var(--center);
            display: inline-block;
            box-sizing: border-box;
            background: unset !important;
            position: absolute;
            transform-style: preserve-3d;
            --0-: calc((var(--0) - var(--0-min)) / var(--0-diff));
            --1-: calc((var(--1) - var(--1-min)) / var(--1-diff));
            --2-: calc((var(--2) - var(--2-min)) / var(--2-diff));
            --d0: calc(var(--0-) * var(--w) - var(--_0));
            --d1: calc(var(--1-) * var(--h) - var(--_1));
            --d2: calc(var(--2-) * var(--d) - var(--_2));
            --offset: translate3d(var(--d0), var(--d1), var(--d2));
            ---offset: translate3d(
                calc(-1 * var(--d0)), calc(-1 * var(--d1)), calc(-1 * var(--d2)));
            transform: 
                var(--offset)
                var(--origin)
                ;
            &amp;:hover{
                border: dashed;
                th::before, th::after {
                    border: solid green 2px;
                }
            }
            &amp;::before, &amp;::after, &amp; th::before, &amp; th::after {
                box-sizing: border-box;
                position: absolute;
                display: block;
                width: 100%;
                height: 100%;
                color: red;
                counter-reset: index var(---0);
                content: counter(index);
                text-align: left;
                vertical-align: inherit;
                transform-origin: var(--center);

            }
            &amp;::before {
                color: purple;
                border-top: solid 2px;
                transform:
                    translateX(var(--d0))
                    var(---offset)
                    translateY(-100%)
                    ;
            }

            &amp;::after {
                color: blue;
                border-left: solid 2px;
                transform:
                    translateY(-100%)
                    translateZ(var(--d2))
                    var(---offset)
                    ;
            }
            &amp; th::before{
                transform: 
                    translateX(var(--d0))
                    var(---offset)
                    translateX(0%)
                    ;

            }
            &amp; th::after {
                color: green;
                transform:
                    translateY(var(--d1))
                    var(---offset)
                    translateY(-100%)
                ;
            }
        }
    }
}
.jp-RenderedHTMLCommon td,
.jp-RenderedHTMLCommon th,
.jp-RenderedHTMLCommon tr {
    padding: 0px;
}
```

when making these it is important to start from the ground up. we want to make sure our index and markers and aligned before we start shifting them around. keeping a slight tilt helps with any abberations in the z direction.

during this drawing i started using more the dev tools ui to rotate and it is nice to know that when css is encapsulated well we get ui.