CSS based cube gizmo
hrgdavor opened this issue · comments
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/
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)
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)
.
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