Spinning Diagrams with CSS

https://x.st/spinning-diagrams-with-css/

by hrldcpr • 3 years ago

954 42 3 years ago

hrldcpr• 3 years ago

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 )

cloudking• 3 years ago

Awesome work, we really don't need Flash anymore :)

ad404b8a372f2b9• 3 years ago

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.

netsharc• 3 years ago

Really neat. Would it be possible to make the letters go gray when they go "behind the cube" from POV of the camera?

kilovoltaire3• 3 years ago

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

pjot• 3 years ago

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.

kilovoltaire3• 3 years ago

Thanks!

TimedToasts• 3 years ago

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.

efields• 3 years ago

Now make it respond to touch

tomcam• 3 years ago

Hey, you're pretty smart--why not give it a spin (ahem) yourself?

gondaloof2• 3 years ago

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)

efortis2• 3 years ago

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

whitten• 3 years ago

These are amazing animations using CSS

efortis2• 3 years ago

Thank you!

undefuser• 3 years ago

Does it work with more than 4 faces while keeping 90 degree turns?

account422• 3 years ago

You could transition to a different cube that just happens to share an identical face when that face is shown front on.

drdebug• 3 years ago

FYI, contrarily to the original post, this does not work with javascript disabled.

samstave• 3 years ago

Maze runnner. interactions.

throwaway14356• 3 years ago

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)

robbywashere_• 3 years ago

If Leonardo Da Vinci knew css

jaza• 3 years ago

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.

sakesun• 3 years ago

If Euclid knew css

asimpletune2• 3 years ago

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.

robin_reala2• 3 years ago

As much as I like the idea of checkbox toggled panels, it’s worth pointing out that that technique is inaccessible.

asimpletune2• 3 years ago

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.

xyst• 3 years ago

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

gondaloof2• 3 years ago

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.

xmppfans• 3 years ago

It is very cool!

Cypher• 3 years ago

It's nice

packetslave• 3 years ago

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.

JBiserkov• 3 years ago

HTML = Humans That Move Linearly

unwind• 3 years ago

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.

Giorgi• 3 years ago

Damn is that 1 symbol domain?

dist-epoch• 3 years ago

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.

myfonj• 3 years ago

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

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

sideproject• 3 years ago

I'm more impressed with the domain name.

Benney_• 3 years ago

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!

ramesh31• 3 years ago

Great example of how absurdly powerful (yet simple) CSS is. Try doing this in one line with literally any other UI technology in existence.

Spinning Diagrams with CSS

Related Stories