3D in CSS(garden.bradwoods.io)
garden.bradwoods.io
3D in CSS
https://garden.bradwoods.io/notes/css/3d
98 comments
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
Thanks for noticing that! The images aren't exactly pinned, but they're constrained based on the nativeWidth as a proportion of the window width, so they can appear to move behind the card but without showing their corners or edges. Getting them not to exceed the bounds was tough, since they're loaded on the fly. One other fun visual gag in this was changing the drop shadow blur amount based on z-order / z-position. But drop shadows don't really track well with 3D CSS rotations, so that was another reason I tamped down the rotating effects in the end.
A neat thing about this interface is that it often works to cycle through all the content at a particular selection level by just repeatedly clicking in the same place. Unfortunately, this doesn't work consistently (neither at 'toplevel' nor in the vertical list of subselections) but it's so close I wonder if you considered it and/or ended up deciding against it for some practical or designy reason.
Either way this is must easily be finest invocation of the 'feeling cute, might delete later' meme on HN so far.
Either way this is must easily be finest invocation of the 'feeling cute, might delete later' meme on HN so far.
Thank you so much! I've struggled to not show stuff on HN for the past decade or so, because I also like to feel free to get into persnickety debates here.
The click-in-one-place cycle sprang from what I'd call a happy accident, after playing with several ways of handling where to put the section you just clicked away from. I realized it was a neat feature not to just send it back to where you had clicked, since that would lead to just A/B clicking, but to shuffle it to the bottom or right side of the deck. It works if you just repeatedly click on the second item. I don't think I could find a way to let a single click on the third item cycle through everything and act in a logically consistent way. A carousel, I guess, but that didn't seem to feel right, because then the next click might skip a bunch. I remember just thinking it might be fun for people to figure it out. I could've just left them alone and not had them reshuffle at all, but what fun would that be?! ;)
Also, twiddling with it sometimes, when I get a new device, I often find myself "missing one". To answer your question about design vs. practicality, this design probably just triggers my own OCD about getting everything arranged just right. I'd say that a lot of software I design is, accidentally, a way to usher users into my own OCD way of thinking about edge cases and make them dot their own i's (rather than repeatedly hammer them with error messages or something). And plus, I like easter egg designs that reveal themselves slowly, when people are actually noticing things. I assume most people don't try to click every entry on a website, so it's nice to leave a little extra to discover for those who do.
Thanks again, your comment made my night.
The click-in-one-place cycle sprang from what I'd call a happy accident, after playing with several ways of handling where to put the section you just clicked away from. I realized it was a neat feature not to just send it back to where you had clicked, since that would lead to just A/B clicking, but to shuffle it to the bottom or right side of the deck. It works if you just repeatedly click on the second item. I don't think I could find a way to let a single click on the third item cycle through everything and act in a logically consistent way. A carousel, I guess, but that didn't seem to feel right, because then the next click might skip a bunch. I remember just thinking it might be fun for people to figure it out. I could've just left them alone and not had them reshuffle at all, but what fun would that be?! ;)
Also, twiddling with it sometimes, when I get a new device, I often find myself "missing one". To answer your question about design vs. practicality, this design probably just triggers my own OCD about getting everything arranged just right. I'd say that a lot of software I design is, accidentally, a way to usher users into my own OCD way of thinking about edge cases and make them dot their own i's (rather than repeatedly hammer them with error messages or something). And plus, I like easter egg designs that reveal themselves slowly, when people are actually noticing things. I assume most people don't try to click every entry on a website, so it's nice to leave a little extra to discover for those who do.
Thanks again, your comment made my night.
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
here is the output http://gofoldit.com/abcdfegh
and this is the tool where you create them
http://gofoldit.com/demo
Many years ago I wanted to build an Issuu-like PDF viewer (https://issuu.com/) built on top of pdf.js and spent a lot of time manually doing CSS transformations. Eventually, I gave up because I couldn't get pdf.js to be fast enough and the experience wasn't as slick as what Issuu had. I wonder if it would be a lot easier now!
Back then, Issuu was written in flash, I'm guessing they've since switched to CSS as well :)
Back then, Issuu was written in flash, I'm guessing they've since switched to CSS as well :)
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.
When I pinched to zoom in, it changed the folding state of the brochure.
No HTTPS?
No user data input either, so why bother.
> why bother
Some of us live in a world where HTTP requests get a whole bunch of either junk or malicious bytes injected into them by ISP's and governments.
Some of us live in a world where HTTP requests get a whole bunch of either junk or malicious bytes injected into them by ISP's and governments.
> 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 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.
God forbid anyone wants to have a local network IoT dashboard or something eh?
Or a Plex server, which I have, lol.
Late 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
Amazing! Love heavy CSS experiments
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.
Those animations are extremely janky on iOS (unsurprisingly)
It doesn’t matter if your slides are plain or not. No one ever thought a talk was good because of how nice the slides’ design was. What matters is having something actually worth giving a presentation about and presenting it effectively, which is all about your delivery and what you put on your slides (good: pictures, diagrams, etc… bad: walls o’ text).
Walls of text too often come with the monotone recital of that very text. But if you’re lucky, the speaker mixes up the order of bullet points or even forgets one which helps you keep your mind engaged and stay awake.
Nah we are animals and flashy movement draws our attention. It has a function.
Flashy movement draws our attention... away from the speaker and the content of the talk. Doesn't help.
Animation can be useful in very small doses if it helps to understand something that is dynamic in nature, but that's it.
Animation can be useful in very small doses if it helps to understand something that is dynamic in nature, but that's it.
That's impressive
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
Doesn't it look a bit like the opening credits to "Last Week Tonight"?
I did some 3d css demos back in 2013. This one got quite popular so maybe you might've seen it:
3D Macbook Air animation: https://codepen.io/neoberg/pen/DEZbKv
This one I think is more impressive but doesn't look as beautiful: https://codepen.io/neoberg/pen/DEwwNE
edit: Forgot about this one. https://codepen.io/neoberg/pen/doVQqv
3D Macbook Air animation: https://codepen.io/neoberg/pen/DEZbKv
This one I think is more impressive but doesn't look as beautiful: https://codepen.io/neoberg/pen/DEwwNE
edit: Forgot about this one. https://codepen.io/neoberg/pen/doVQqv
This website brings me Joy. So elegant.
Came to say the same thing. Thought it was actual pictures of old documents until I realized it was interactive. Worked on my iPhone which is equally impressive. Not many of the 3d sites showcased here do.
Not a web frontend developer, but added it to bookmarks because it's so awesome and enjoyable
Yeah, I wouldn't want every website to look like this but it's a very refreshing design that works super well.
But it's Johnny Cab - I hope you paid the fare!
Even 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/
Loving the format! Tho to note the controls are a little (tiny bit) fiddly on FF.
Throwing my hat in ~ some basic / not-particularly-optimised 3d CSS hover state icons I made for my CV a few months ago: https://codepen.io/theprojectsomething/pen/JjLLJNx :)
Throwing my hat in ~ some basic / not-particularly-optimised 3d CSS hover state icons I made for my CV a few months ago: https://codepen.io/theprojectsomething/pen/JjLLJNx :)
They are slick
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.
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)
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)
If your doing heavy 3D work, three.js / r3f are totally are good fit. But may be overkill for smaller requirements. They come with a big package payload cost.
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!
Since 2015 I have been thinking how to explore information as a 3D structure. This thought has led to developing plurid [1], [2], a component library (for React for now) to transform a web page into a rotate-able/translate-able/scale-able space with the content on planes.
[1] Code, https://github.com/plurid/plurid
[2] Demo, https://www.youtube.com/watch?v=aV7MWFDVFkk
[1] Code, https://github.com/plurid/plurid
[2] Demo, https://www.youtube.com/watch?v=aV7MWFDVFkk
I remember doing this back in 2012 using the matrix3d()
https://ehsankia.com/css3/2.html
Honestly surprised it still works
https://ehsankia.com/css3/2.html
Honestly surprised it still works
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.
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.
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)
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!
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.
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?
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.
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.
Weird, doesn't lag at all here on Firefox/X11 on my amd igpu notebook
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.
Edit: looking at the code above it, it uses onmousedown which doesn't work for touch I guess.
It's using the native resize property which is supported on Firefox Android but that doesn't help much if the tap target is too small.
onmousedown is used to change the transform property. It should still resize even if onmousedown isn't working.
onmousedown is used to change the transform property. It should still resize even if onmousedown isn't working.
[deleted]
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.
Works poorly on Firefox, too.
> 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 browser dev tools, looking at the underlying structure of any page and how elements are nested, to figure out where most of the complexity lies.
I think Firefox actually used to have that, though it was removed: https://firefox-source-docs.mozilla.org/devtools-user/3d_vie...
This is really cool, might even be helpful to have as a feature to have in browser dev tools, looking at the underlying structure of any page and how elements are nested, to figure out where most of the complexity lies.
I think Firefox actually used to have that, though it was removed: https://firefox-source-docs.mozilla.org/devtools-user/3d_vie...
Yes, that feature was really helpful for understanding stacking contexts (and debugging related issues). I don't know why it was abandoned.
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-...
Here's a longer list compiled by Nikita: https://wiki.nikiv.dev/other/wiki-workflow#similar-wikis-i-l...
Tracking mouse movement over a CSS 3d rotated canvas element can be fun
https://scrawl-v8.rikweb.org.uk/demo/dom-013.html
https://scrawl-v8.rikweb.org.uk/demo/dom-013.html
Interesting! You could use this to make some 'Mode 7'-like games.
[deleted]
I made a silly landing page for myself using some of the outline techniques. I think it looks fun: https://www.goodbarn.xyz/
Its just a pure html page, so you can view page source and see how rugged it is.
Its just a pure html page, so you can view page source and see how rugged it is.
Is there any way to enable anti-aliasing for stuff like that? I think CSS had something for image resampling, maybe something similar exists here? It doesn’t look too great on Firefox (Windows 10) for me. It’s better on Edge, but still not good.
Brad has a large collection of excellent articles written to educate on topics [1]. Don't miss the others, there are some real gems.
[1] https://garden.bradwoods.io/
[1] https://garden.bradwoods.io/
Thanks for the feedback!
I really enjoyed this website. There are many more interesting topics in addition to the 3D CSS stuff
"Where to Next?"
Don't worry, things hardly ever fuck up around here. That's the same guy, right?
Don't worry, things hardly ever fuck up around here. That's the same guy, right?
Does that website have an RSS feed?
Just got 1 going - https://garden.bradwoods.io/rss.xml
Working on it.
Is there some broken screen effect on this website? or am I going insane?
fwiw this website is stellar - check out all the other articles if you're a front-end dev!
Sliders don't work on mobile
I had the same feeling at first with the first slider, then realized that the initial value was the max value, so sliding down worked, whereas attempting to slide up wouldn't...
Huh? They work fine for me.
This is so cool.
https://thestrikeagency.com
[edit] I almost never show personal work here so I may delete this...