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

41–50 of 99 posts

Re: 3D in CSS

#41

Post by gfd »

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.

IIRC three.js even supports using a CSS renderer out of the box: https://threejs.org/docs/#examples/en/renderers/CSS3DRendere... (as opposed to webgl or webgl2 renderers)

This means you can reuse the same code and fallback to rendering triangles with CSS transform matrix3d if the browser doesn't have webgl. (but of course w/o shader materials etc)

Re: 3D in CSS

#43

Post by greenSunglass »

The way this page was built is amazing for learning. "dragging" the properties and visualize / see what effect it has instantly is so helpful to understand what's up. Wish I've learnt CSS with that kind of page.

Re: 3D in CSS

#46

Post by easrng »

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

No HTTPS?

Re: 3D in CSS

#48

Post by noduerme »

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 did various flip effects as they moved, but I ended up ditching all but a slight amount of axis tilt on a few elements as it was hard to read and hard to position accurately in 2D space in relation to each other across a lot of screen sizes...

https://thestrikeagency.com

[edit] I almost never show personal work here so I may delete this...

Re: 3D in CSS

#49

Post by bradwoodsio »

greenSunglass wrote: post #43

The way this page was built is amazing for learning. "dragging" the properties and visualize / see what effect it has instantly is so helpful to understand what's up. Wish I've learnt CSS with that kind of page.

Appreciate the feedback!

Re: 3D in CSS

#50

Post by Minor49er »

noduerme wrote: post #48

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