It is difficult to make custom CSS properties that have custom rendering abilities.
Using tools like PostCSS, it is not possible to make custom properties with specific rendering abilities because PostCSS (etc) compile new language features into old language equivalents. This does not give us any opportunity to define rendering effects, only language features.
So, if I want to make a new property called
distort that will bend the shape of an object in 3D space…
How would I do that?
I already have the graphical requirement fulfilled, which is that I can render things using
Three.js and expose the 3D objects as Custom Elements.
So the question is, how do I define a custom property in CSS, and react to changes of this custom property so I can update rendering?
This is basically a re-make of my other thread, A way to observe changes in CSS custom properties, but I wanted to start fresh.
Is there any established way of achieving this today?
It would be great to have a conventional way to achieve this so that we can prototype new rendering features, not just language features (PostCSS).
If there’s no other options, I might just start by taking that approach and re-computing rendering based on that technique.