https://impress.js.org/ uses this extensively to create impressive presentations.
The experience on mobile is really jumpy if you try to swipe or pinch zoom.
3D in CSS
21–30 of 99 posts
Re: 3D in CSS
#22This is so cool.
Re: 3D in CSS
#23This lorem ipsum works so-so on Safari. The text can be selected and it only rotates after selecting and deselecting it
Works poorly on Firefox, too.
Re: 3D in CSS
#24https://impress.js.org/ uses this extensively to create impressive presentations.
Goodbye back button
Re: 3D in CSS
#25Earlier quoted context omitted.
Just like overused Powerpoint transitions, I can see this getting old quickly.
I've never seen this before, so not sure how it's normally used. But I like it a lot. Instead of randomly using transforms to add "flair" to your presentation, it looks useful for presenting multiple scales of diagrams in an intuitive way. It's like powerpoint + https://c4model.com/ .
it looks like the opening credit sequence to some movie i've seen. maybe a tv show, but the point is that i saw it, it's recognizable, but did not make me remember the name of the show. so will using something like this make people remember your presentation content or just the fact you used some gimmicky effect
Re: 3D in CSS
#26I 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?
That's it! Thanks.
Re: 3D in CSS
#27I 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?
Yah, thanks. Brain fart.
Re: 3D in CSS
#28Late 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
Re: 3D in CSS
#29This 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.
Re: 3D in CSS
#30Even if you are using WebGL for 3D, CSS 3D can be useful for adding interactive HTML to your scene. For example, here's a WebGL 3D model of a TV with a working YouTube embed for the screen: https://playcanv.as/p/nzMF97vU/