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 :)
3D in CSS
51–60 of 99 posts
Re: 3D in CSS
#52I 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
Re: 3D in CSS
#53Re: 3D in CSS
#54I 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
Re: 3D in CSS
#55Re: 3D in CSS
#56Earlier 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
Re: 3D in CSS
#57Sliders don't work on mobile
Re: 3D in CSS
#58I 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
Re: 3D in CSS
#59Re: 3D in CSS
#60Earlier 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.…
Either way this is must easily be finest invocation of the 'feeling cute, might delete later' meme on HN so far.