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

71–80 of 99 posts

Re: 3D in CSS

#71

Post by justsomehnguy »

slimsag wrote: post #38
kroltan wrote: post #33

Earlier quoted context omitted.

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.

It's not performance laggy, it's moving the layers.

Probably something wrong with the math, because if take the scrollbar and move it slowly you would notice how some layers starts to bob up and down, instead of monotonic movement.

Re: 3D in CSS

#72

Post by LoganDark »

tifik wrote: post #70
easrng wrote: post #46

Earlier quoted context omitted.

No HTTPS?

No user data input either, so why bother.

> why bother

Some modern browsers will refuse to connect over plaintext HTTP. Mine in particular will let me, but it will first show a fullscreen warning

Re: 3D in CSS

#73

Post by LoganDark »

slimsag wrote: post #38
kroltan wrote: post #33

Earlier quoted context omitted.

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.

That's because the layers are missing a `will-change: transform` property. Adding said property fixes it right up for me.

I was tipped off by it being suddenly super smooth for a second, meaning that the browser was probably applying some heuristic. I added `will-change: transform` and boom. Real-world example of its usefulness!

Re: 3D in CSS

#75

Post by bleuarff »

KronisLV wrote: post #68

> Sometimes a thing can be better communicated when shown from multiple perspectives. Below is an wireframe of a web page I used in a presentation. I needed to communicate there are 3 elements in the top-right corner, stacked on top of 1 another. By translating & rotating this wireframe in a 3D-space, I can show it from a 2nd perspective. This is really cool, might even be helpful to have as a feature to have in brow…

Yes, that feature was really helpful for understanding stacking contexts (and debugging related issues). I don't know why it was abandoned.

Re: 3D in CSS

#76

Post by itsuka »

toughyear wrote: post #66

The website is well crafted. Anyone has a list of more such non-generic sites with content by developers?

The website's theme and philosophy revolve around digital gardening. I am in the process of building one for myself, and I use this list as a source of inspiration: https://github.com/MaggieAppleton/digital-gardeners#digital-...

Re: 3D in CSS

#77

Post by vegabook »

andrecarini wrote: post #52
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

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

yes this is an issue. Our eyes and brains are hardwired to focus on moving objects in a static scene, and this shifting aliasing distracts attention from the content.

Re: 3D in CSS

#78

Post by moffkalast »

LoganDark wrote: post #72
tifik wrote: post #70

Earlier quoted context omitted.

No user data input either, so why bother.

> why bother Some modern browsers will refuse to connect over plaintext HTTP. Mine in particular will let me, but it will first show a fullscreen warning

Some modern browsers suck, especially if you also can't view local unsigned pages which makes development like, impossible.

Re: 3D in CSS

#80

Post by LoganDark »

moffkalast wrote: post #78
LoganDark wrote: post #72

Earlier quoted context omitted.

> why bother Some modern browsers will refuse to connect over plaintext HTTP. Mine in particular will let me, but it will first show a fullscreen warning

Some modern browsers suck, especially if you also can't view local unsigned pages which makes development like, impossible.

No, localhost works fine. But LAN does warn.
Post reply on HN