Live data from Hacker News

3D in CSS

garden.bradwoods.io

51–60 of 99 posts

Re: 3D in CSS

#51

Loving the format! Tho to note the controls are a little (tiny bit) fiddly on FF. Throwing my hat in ~ some basic / not-particularly-optimised 3d CSS hover state icons I made for my CV a few months ago: https://codepen.io/theprojectsomething/pen/JjLLJNx :)

They are slick

Re: 3D in CSS

#52

I did a project a while back that takes advantage of this, as a way to show the folding an unfolding of brochures, I found it to work much better for this particular use case than WebGL here is the output http://gofoldit.com/abcdfegh and this is the tool where you create them http://gofoldit.com/demo

Heavy aliasing on the borders for me. I wonder if it could be smoothed out with scale operations?

Re: 3D in CSS

#54

I did a project a while back that takes advantage of this, as a way to show the folding an unfolding of brochures, I found it to work much better for this particular use case than WebGL here is the output http://gofoldit.com/abcdfegh and this is the tool where you create them http://gofoldit.com/demo

When I pinched to zoom in, it changed the folding state of the brochure.

Re: 3D in CSS

#56

Earlier quoted context omitted.

I've never seen this before, so not sure how it's normally used. But I like it a lot. Instead of randomly using transforms to add "flair" to your presentation, it looks useful for presenting multiple scales of diagrams in an intuitive way. It's like powerpoint + https://c4model.com/ .

it looks like the opening credit sequence to some movie i've seen. maybe a tv show, but the point is that i saw it, it's recognizable, but did not make me remember the name of the show. so will using something like this make people remember your presentation content or just the fact you used some gimmicky effect

Doesn't it look a bit like the opening credits to "Last Week Tonight"?

Re: 3D in CSS

#58

I built an engine for my personal site (5-6 years back) along similar lines, with the idea being that elements are defined as "papers" of different sizes that are constantly being animated, and reshuffle themselves on window resize to different positions. (Try rotating it if you look on a phone or tablet). They're all 3d css (so the browser caches their content as bitmaps and renders them as such) and originally they…

This is pretty cool. I like how the backgrounds of the cards are also pinned to their positions. It's like looking through little windows instead of just plain images

Thanks for noticing that! The images aren't exactly pinned, but they're constrained based on the nativeWidth as a proportion of the window width, so they can appear to move behind the card but without showing their corners or edges. Getting them not to exceed the bounds was tough, since they're loaded on the fly. One other fun visual gag in this was changing the drop shadow blur amount based on z-order / z-position. But drop shadows don't really track well with 3D CSS rotations, so that was another reason I tamped down the rotating effects in the end.

Re: 3D in CSS

#60

Earlier quoted context omitted.

This is pretty cool. I like how the backgrounds of the cards are also pinned to their positions. It's like looking through little windows instead of just plain images

Thanks for noticing that! The images aren't exactly pinned, but they're constrained based on the nativeWidth as a proportion of the window width, so they can appear to move behind the card but without showing their corners or edges. Getting them not to exceed the bounds was tough, since they're loaded on the fly. One other fun visual gag in this was changing the drop shadow blur amount based on z-order / z-position.…

A neat thing about this interface is that it often works to cycle through all the content at a particular selection level by just repeatedly clicking in the same place. Unfortunately, this doesn't work consistently (neither at 'toplevel' nor in the vertical list of subselections) but it's so close I wonder if you considered it and/or ended up deciding against it for some practical or designy reason.

Either way this is must easily be finest invocation of the 'feeling cute, might delete later' meme on HN so far.

Post reply on HN