CSS based cube gizmo

[Davor Hrg]

starting with something like this and make it a webcomponent with shadow dom. There will be more iterations, but start with a simple one that has top,left,bottom,right,back,front

It is partially implemented in prototype branch, time to move to main.

interesting nasty issue with shadow dom if innerHTML is used in wrong way, css variables fail to work as expected (at least as expected by me)

if I use

export class Gizmo extends HTMLElement {
  #root
  connectedCallback() {
    this.#root = this.attachShadow({ mode: 'open' })
    this.innerHTML = `<div class="cube">.....

it works ok, but css variables are not working for inner elements

and to fix it innerHTML needs to be called on shadowRoot

export class Gizmo extends HTMLElement {
  #root
  connectedCallback() {
    this.#root = this.attachShadow({ mode: 'open' })
  connectedCallback() {
    this.#root = this.attachShadow({ mode: 'open' })
    this.#root.innerHTML = `<div class="cube">.....

nice tutorial on one of my fav sites: https://css-tricks.com/an-introduction-to-web-components/

this.#root.innerHTML = `<div class="cube">.....

nice tutorial on: https://css-tricks.com/an-introduction-to-web-components/

[Davor Hrg]

bandicam.2022-11-20.01-02-05-348.mp4

html based web-component with shadow-dom ... the calculactions are getting the desired behaviour, I just need to align what iw shat, up, down, rotation where
the css transform to get right behaviour must mix axes, so I need revisit my calculations or naming scale3d(0.8,0.8,0.8) rotateX(${ry}rad) rotateY(${-rz}rad)

[Davor Hrg]

important nuance regarding 2d computer graphics and XY https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function

In the Cartesian coordinate system, a two-dimensional point is described using two values: an x coordinate (abscissa) and a y coordinate (ordinate). This is represented by the vector notation (x, y).

In CSS (and most computer graphics), the origin (0, 0) represents the top-left corner of any element. Positive coordinates are down and to the right of the origin, while negative ones are up and to the left. Thus, a point that's 2 units to the right and 5 units down would be (2, 5), while a point 3 units to the left and 12 units up would be (-3, -12).

[Davor Hrg]

The initial version is almost ready

[Davor Hrg]

Initial implementaion looks decent and has some docs in readme, including a start of a demo page to be later included in main gihub page