Spinning Diagrams with CSS (opens in new tab)

Some 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 )

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...

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.

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.

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

I wonder what a screen reader reads out when it encounters this

I have used the same approach for plotting named colours in RGB cube [1]

[1]: https://codepen.io/myf/full/poyoyLr

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