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

91–99 of 99 posts

Re: 3D in CSS

#91

Post by moffkalast »

LoganDark wrote: post #80
moffkalast wrote: post #78

Earlier quoted context omitted.

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.

God forbid anyone wants to have a local network IoT dashboard or something eh?

Re: 3D in CSS

#92

Post by ehsankia »

LoganDark wrote: post #74
ehsankia wrote: post #34

I remember doing this back in 2012 using the matrix3d() https://ehsankia.com/css3/2.html Honestly surprised it still works

I love this webpage

The fact that you can select the "W, A, S, D, Space, Mouse" text with your cursor I think is what really brings it all home.

Re: 3D in CSS

#94

Post by kroltan »

LoganDark wrote: post #73
slimsag wrote: post #38

Earlier quoted context omitted.

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!

I think this website predates the widespread support of will-change, the website first displayed this parallax effect (in a more primitive way) sometime in 2014.

caniuse.com tells me the first moment that both Firefox and Chrome supported this property was in early 2015.

Re: 3D in CSS

#95

Post by kroltan »

justsomehnguy wrote: post #71
slimsag wrote: post #38

Earlier quoted context omitted.

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.

The math seems fine, but they didn't hint the browser to not snap the images to the pixel grid, so scrolling very slowly means a lot of the layers will move less than 1 pixel per frame, which causes the bobbing.

Re: 3D in CSS

#97

Post by LoganDark »

kroltan wrote: post #94
LoganDark wrote: post #73

Earlier quoted context omitted.

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!

I think this website predates the widespread support of will-change, the website first displayed this parallax effect (in a more primitive way) sometime in 2014. caniuse.com tells me the first moment that both Firefox and Chrome supported this property was in early 2015.

Interesting. Is it possible that the addition of `will-change` caused browsers to relax their default heuristics, believing that websites would use the property as needed now that it's available?
Post reply on HN