Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Spinning Diagrams with CSS

x.st

Post reply on HN
Print view View original

21–30 of 45 posts

Re: Spinning Diagrams with CSS

#21

Post by fwlr »

kilovoltaire wrote: post #12
netsharc wrote: post #11

Earlier quoted context omitted.

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.

Re: Spinning Diagrams with CSS

#23

Post by undefuser »

efortis wrote: post #5

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?

Re: Spinning Diagrams with CSS

#27

Post by kilovoltaire »

fwlr wrote: post #21
kilovoltaire wrote: post #12

Earlier quoted context omitted.

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/

Re: Spinning Diagrams with CSS

#28

Post by robin_reala »

asimpletune wrote: post #14

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.

Re: Spinning Diagrams with CSS

#29

Post by gondaloof »

xyst wrote: post #17

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.

Re: Spinning Diagrams with CSS

#30

Post by gondaloof »

efields wrote: post #4

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)
Post reply on HN