3D in CSS
garden.bradwoods.io
garden.bradwoods.io
[edit] I almost never show personal work here so I may delete this...
Either way this is must easily be finest invocation of the 'feeling cute, might delete later' meme on HN so far.
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.
here is the output http://gofoldit.com/abcdfegh
and this is the tool where you create them
Back then, Issuu was written in flash, I'm guessing they've since switched to CSS as well :)
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 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.
Animation can be useful in very small doses if it helps to understand something that is dynamic in nature, but that's 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
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 :)
This is using a wrapper called react-three-fiber to make the code more declarative rather than imperative.
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)
[1] Code, https://github.com/plurid/plurid
https://ehsankia.com/css3/2.html
Honestly surprised it still works
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.
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)
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.
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!
caniuse.com tells me the first moment that both Firefox and Chrome supported this property was in early 2015.
Edit: looking at the code above it, it uses onmousedown which doesn't work for touch I guess.
onmousedown is used to change the transform property. It should still resize even if onmousedown isn't working.
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...
Its just a pure html page, so you can view page source and see how rugged it is.
Don't worry, things hardly ever fuck up around here. That's the same guy, right?