Spinning Diagrams with CSS
x.stSome commenters on HN and Twitter were curious how I made the spinning diagrams in a previous thing I wrote, so 8 months later I finally wrote down an explanation.
(Previous HN thread here - https://news.ycombinator.com/item?id=32528769 )
The spinning dimension adds such an information dense layer to the sum of cubes examples - a fantastic display of what is good data visualization.
Also, I’m quite jealous of your one letter domain.
Thanks!
I enjoyed the part referencing selected/highlighted areas rotating 'correctly'. I had to try it and it was just as pleasing as you said it would be.
Kudos for the write-up and kudos to the anonymous devs out there who wrote that portion of browser code.
This is fantastic, do you have any other interesting techniques for displaying math?
I never thought to augment plain old equations like that, it's making my mind bubble.
Awesome work, we really don't need Flash anymore :)
Really neat. Would it be possible to make the letters go gray when they go "behind the cube" from POV of the camera?
Oh yeah that would look cool…
Possibly transparent faces of the cube with a particular `mix-blend-mode` that leaves the background color alone but dims letters that get behind it?
(That's just a wild guess, I don't know if it's actually possible.)
Faces of the cube with the same color as the background and opacity 0.2 would almost certainly work. My next thought is duplicate the original cube, remove the characters from the duplicate cube and set the color on the duplicate only, then move the duplicate cube back one pixel in the z direction.
Ah yeah faces with same color as background and low opacity sounds like a good approach.
Here's an editable copy of the code if anyone sees this and wants to try adding the faces - https://jsfiddle.net/t0crk5do/
Here's a fluid-width cube carousel you can stop at its faces:
https://ericfortis.github.io/web-animations/#-fluid-3d-cube-...
Source:
https://github.com/ericfortis/web-animations/blob/main/3d-ca...
Does it work with more than 4 faces while keeping 90 degree turns?
You could transition to a different cube that just happens to share an identical face when that face is shown front on.
These are amazing animations using CSS
Thank you!
FYI, contrarily to the original post, this does not work with javascript disabled.
This is awesome in (for me) at least two dimensions at the same time: it's a very interesting way of visualizing the actual math concept going on, by making the equation 3D to match what it's modelling. At the same time, it's very impressive technically that this can be done at all, and done without active per-frame custom code.
That this amount of "whoa that's not a 2D document" can be done by the web's standard stylizing technology is amazing. I'm not (again, personally) 100% convinced it should be this amazing[*], but that's another discussion.
Well done.
[*]: I'm just afraid of the complexity level in modern browsers, that's the other side of the "wow it can do that?" coin.
You can do so much with pure css. Using checkboxes elements to toggle menus comes to mind as one of the lowest hanging fruits. Also detail elements are great.
As much as I like the idea of checkbox toggled panels, it’s worth pointing out that that technique is inaccessible.
Really? Can you explain this a little more? If memory serves I use close/open check boxes that have labels with descriptive aria and IDs. Then toggling one hides itself and reveals the other.
Typically you’d want to toggle aria-expanded to give more hints to users as to what’s actually happening. You also can’t trap focus into the menu purely with CSS, at a minimum you’ll need to use some JS to set an inert attribute. More info / examples here: https://adrianroselli.com/2023/03/css-only-widgets-are-inacc...
You can do that as progressive enhancement on top of the CSS-only checkbox solution though.
The pyramid animation at the top reminds me of 11:30 in this video: https://youtu.be/q6MJSfjXUgQ?t=690
...which is the same 2D/3D illusion, but made with, you know... humans.
HTML = Humans That Move Linearly
3D CSS is actually super powerful, and once you wrap your head around how transforms interact with each other you can use it like any other 3D library.
Me and a friend made a game using 3D CSS a few years ago: https://js13kgames.com/entries/3dc5s.
I'm not sure I'd ever use it again for something that large as it's a hell of a lot of work but so satisfying once you see the monstrosity you've created running!
If Leonardo Da Vinci knew css
He would never have finished Vitruvian Man, he would have wasted too much time trying to get it looking perfect across all browsers / devices / zoom levels.
If Euclid knew css
I wonder what a screen reader reads out when it encounters this
CSS is largely ignored by readers with few exceptions (`transform` is ignored, `display: none` excludes the text).
You can definitely make this accessible but that alone is a whole exercise. The best bet would be to use MathML-in-HTML and hope that the reader supports it.
I have used the same approach for plotting named colours in RGB cube [1]
Great example of how absurdly powerful (yet simple) CSS is. Try doing this in one line with literally any other UI technology in existence.
i made some n dimensional chart one time. it starts with the usual 2D x,y,z axes then rotates as if a cube to the next chart keeping the dots in the same 3D spot ending in 2D and on to the next chart :)
(using css where possible ofc)
I'm more impressed with the domain name.
Damn is that 1 symbol domain?
It is very cool!
On one hand people are in awe at this, on the other they complain how bloated browsers are and how much functionality is crammed in them and how they wish for a simple "document only web".
Pick one.
It's nice
Maze runnner. interactions.
Now make it respond to touch
It's actually not terribly difficult, even without JavaScript if you use the new scroll-linked CSS animations and a fake/hidden scrollable area (but without JS, the rotation would be limited to the scroll area itself)
Hey, you're pretty smart--why not give it a spin (ahem) yourself?