7 ms·
Spinning Diagrams with CSS
- dist-epoch 3y agoOn 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.
- hrldcpr 3y agoSome 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 https://news.ycombinator.com/item?id=32528769 )
- cloudking 3y agoAwesome work, we really don't need Flash anymore :)
- ad404b8a372f2b9 3y agoThis 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 3y agoReally neat. Would it be possible to make the letters go gray when they go "behind the cube" from POV of the camera?
- kilovoltaire 3y agoOh 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.)
- fwlr 3y agoFaces 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.
- kilovoltaire 3y agoAh 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/ https://jsfiddle.net/t0crk5do/
- pjot 3y agoThe 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.
- kilovoltaire 3y agoThanks!
- TimedToasts 3y agoI 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 3y agoNow make it respond to touch
- tomcam 3y agoHey, you're pretty smart--why not give it a spin (ahem) yourself?
- gondaloof 3y agoIt'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)
- efortis 3y agoHere's a fluid-width cube carousel you can stop at its faces: https://ericfortis.github.io/web-animations/#-fluid-3d-cube-carousel https://ericfortis.github.io/web-animations/#-fluid-3d-cube-... Source: https://github.com/ericfortis/web-animations/blob/main/3d-carousel.js https://github.com/ericfortis/web-animations/blob/main/3d-ca...
- whitten 3y agoThese are amazing animations using CSS
- efortis 3y agoThank you!
- undefuser 3y agoDoes it work with more than 4 faces while keeping 90 degree turns?
- account42 3y agoYou could transition to a different cube that just happens to share an identical face when that face is shown front on.
- drdebug 3y agoFYI, contrarily to the original post, this does not work with javascript disabled.
- samstave 3y agoMaze runnner. interactions.
- throwaway14356 3y agoi 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_ 3y agoIf Leonardo Da Vinci knew css
- asimpletune 3y agoYou 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_reala 3y agoAs much as I like the idea of checkbox toggled panels, it’s worth pointing out that that technique is inaccessible.
- asimpletune 3y agoReally? 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.
- robin_reala 3y agoTypically 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-inaccessible.html#Disclosures https://adrianroselli.com/2023/03/css-only-widgets-are-inacc...
- account42 3y agoYou can do that as progressive enhancement on top of the CSS-only checkbox solution though.
- xyst 3y agoI wonder what a screen reader reads out when it encounters this
- gondaloof 3y agoCSS 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 3y agoIt is very cool!
- Cypher 3y agoIt's nice
- packetslave 3y agoThe pyramid animation at the top reminds me of 11:30 in this video: https://youtu.be/q6MJSfjXUgQ?t=690 https://youtu.be/q6MJSfjXUgQ?t=690 ...which is the same 2D/3D illusion, but made with, you know... humans.
- JBiserkov 3y agoHTML = Humans That Move Linearly
- yulun 3y ago[flagged]
- unwind 3y agoThis 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 3y agoDamn is that 1 symbol domain?
- myfonj 3y agoI have used the same approach for plotting named colours in RGB cube [1] [1]: https://codepen.io/myf/full/poyoyLr https://codepen.io/myf/full/poyoyLr
- sideproject 3y agoI'm more impressed with the domain name.
- vrglvrglvrgl 3y ago[dead]
- Benney_ 3y ago3D 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 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 3y agoGreat example of how absurdly powerful (yet simple) CSS is. Try doing this in one line with literally any other UI technology in existence.