3D CSS Stress Test - PropJockey DOMinion

The scene above is 99.9% HTML and CSS.
No svg, no images, no data urls, and only 3 lines of JavaScript to pass the window's width into CSS as a scalar value (once at load, and on resizes)

<blink>Now with added JS controls to explore the DOM!</blink>

Here are the control bindings:
  "e": "rotateRight",
  "q": "rotateLeft",
  "a": "strafeLeft",
  "d": "strafeRight",
  "w": "moveForward",
  "s": "moveBackward",
  " ": "moveUp",
  "c": "moveDown",
  "ArrowRight": "rotateRight",
  "ArrowLeft": "rotateLeft",
  "ArrowUp": "rotateUp",
  "ArrowDown": "rotateDown"

Works best in Firefox.

Follow me on Twitter @James0x57

The scene is a 3D derivative of beautiful artwork by Romain Trystram created for Affinity. Neither the artist or the company are involved or have knowledge of this or me, but they are both very much worth checking out!

Stay well!

PS: if you're familiar with css variables, fallbacks, & the "initial" value and you think the following CSS shows confusing behavior, please consider supporting my request to change the Spec:


        code {
          --color: red;
          background: var(--color, lime);
        }
        i {
          --foo: initial;
          --color: var(--foo); /* should be initial */
          background: var(--color, lime); /* initial should cause fallback */
        }
        <code>
          red, of course
          <i>lim--- ...actually red too..?!</i>
        </code>

Until Chrome 83 and FF 78, the bg was lime, which was incorrect according to the spec. I'm requesting to make it the correct behavior though and have the browsers revert to previous, more useful, behavior.
(Now, if --color is a computed value, then "lime" is an unreachable fallback when --color was set on any ancestor in the DOM.)

Spec Issue on GitHub: https://github.com/w3c/csswg-drafts/issues/5370

Thank you! <3