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

3D in CSS

garden.bradwoods.io

Post reply on HN
Print view View original

31–40 of 99 posts

Re: 3D in CSS

#31

Post by bradwoodsio »

satvikpendem wrote: post #29

This is cool but if you haven't already, check out what Three.js can do in the browser: https://codesandbox.io/s/lxvqek?file=/src/App.js This is using a wrapper called react-three-fiber to make the code more declarative rather than imperative.

If your doing heavy 3D work, three.js / r3f are totally are good fit. But may be overkill for smaller requirements. They come with a big package payload cost.

Re: 3D in CSS

#33

Post by kroltan »

geuis wrote: post #3

I forget the name of the effect, but it's the one where the background may have images that move at different rates as the page scroll increases. Over the years I've seen many, many terrible implementations of that effect with JavaScript. The correct and highly performant way to do that is using perspective. It's an effect that can be done entirely in css.

Parallax.

My favorite implementation is on the homepage of Campo Santo's Firewatch game: https://www.firewatchgame.com/

Not only the parallax itself, but the creativity! They used semitransparent layers so that when you scroll it looks like there are specular reflections! (the glittery specks of light)

Re: 3D in CSS

#36

Post by Sn0wCoder »

gketuma wrote: post #7

This website brings me Joy. So elegant.

Came to say the same thing. Thought it was actual pictures of old documents until I realized it was interactive. Worked on my iPhone which is equally impressive. Not many of the 3d sites showcased here do.

Re: 3D in CSS

#37

Post by kevmo314 »

natelokers wrote: post #18

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

Many years ago I wanted to build an Issuu-like PDF viewer (https://issuu.com/) built on top of pdf.js and spent a lot of time manually doing CSS transformations. Eventually, I gave up because I couldn't get pdf.js to be fast enough and the experience wasn't as slick as what Issuu had. I wonder if it would be a lot easier now!

Back then, Issuu was written in flash, I'm guessing they've since switched to CSS as well :)

Re: 3D in CSS

#38

Post by slimsag »

kroltan wrote: post #33
geuis wrote: post #3

I forget the name of the effect, but it's the one where the background may have images that move at different rates as the page scroll increases. Over the years I've seen many, many terrible implementations of that effect with JavaScript. The correct and highly performant way to do that is using perspective. It's an effect that can be done entirely in css.

Parallax. My favorite implementation is on the homepage of Campo Santo's Firewatch game: https://www.firewatchgame.com/ Not only the parallax itself, but the creativity! They used semitransparent layers so that when you scroll it looks like there are specular reflections! (the glittery specks of light)

Interesting, it's laggy even on my M1 macbook + Firefox.

Re: 3D in CSS

#39

Post by mindover »

TazeTSchnitzel wrote: post #28

Late last year I wrote a tool that can take a 3D model in .obj format and turn it into HTML and CSS that'll display the model rotating about its y axis. It's ludicrously inefficient and impractical, but it was very fun to do: https://github.com/hikari-no-yume/obj-to-html

Amazing! Love heavy CSS experiments
Post reply on HN