3D in CSS

#1

Post by bradwoodsio » Mon, Jan 09, 2023, 8:16 PM UTC

3D in CSS
garden.bradwoods.io

Re: 3D in CSS

#2

Post by pfoof » Mon, Jan 09, 2023, 8:38 PM UTC

This lorem ipsum works so-so on Safari. The text can be selected and it only rotates after selecting and deselecting it

Re: 3D in CSS

#3

Post by geuis » Mon, Jan 09, 2023, 8:44 PM UTC

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.

Re: 3D in CSS

#4

Post by bradwoodsio » Mon, Jan 09, 2023, 8:45 PM UTC

pfoof wrote: post #2

This lorem ipsum works so-so on Safari. The text can be selected and it only rotates after selecting and deselecting it

I'm always having problems with Safari, there is a background-blend-mode on the site that doesn't work on it either, so the site doesn't look like it should.

Re: 3D in CSS

#5

Post by SCUSKU » Mon, Jan 09, 2023, 8:45 PM UTC

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?

Re: 3D in CSS

#6

Post by bradwoodsio » Mon, Jan 09, 2023, 8:46 PM UTC

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.

I think you mean parallax scroll?

Re: 3D in CSS

#7

Post by gketuma » Mon, Jan 09, 2023, 8:54 PM UTC

This website brings me Joy. So elegant.

Re: 3D in CSS

#8

Post by derkoe » Mon, Jan 09, 2023, 8:57 PM UTC

https://impress.js.org/ uses this extensively to create impressive presentations.

Re: 3D in CSS

#9

Post by bradwoodsio » Mon, Jan 09, 2023, 8:59 PM UTC

derkoe wrote: post #8

https://impress.js.org/ uses this extensively to create impressive presentations.

That's impressive

Re: 3D in CSS

#10

Post by matsemann » Mon, Jan 09, 2023, 9:08 PM UTC

pfoof wrote: post #2

This lorem ipsum works so-so on Safari. The text can be selected and it only rotates after selecting and deselecting it

Can't manage to drag the small corner on Firefox for Android. Might be a bug, or just because it's too small to hit.

Edit: looking at the code above it, it uses onmousedown which doesn't work for touch I guess.