9 ms·
3D in CSS
- WaffleIronMaker 4y agoIs there some broken screen effect on this website? or am I going insane?
- pfoof 4y agoThis lorem ipsum works so-so on Safari. The text can be selected and it only rotates after selecting and deselecting it
- bradwoodsio 4y agoI'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.
- matsemann 4y agoCan'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.
- deleted 4y ago[deleted]
- bradwoodsio 4y agoIt'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.
- chungy 4y agoWorks poorly on Firefox, too.
- geuis 4y agoI 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.
- SCUSKU 4y agoParallax?
- geuis 4y agoYah, thanks. Brain fart.
- bradwoodsio 4y agoI think you mean parallax scroll?
- geuis 4y agoThat's it! Thanks.
- kroltan 4y agoParallax. My favorite implementation is on the homepage of Campo Santo's Firewatch game: https://www.firewatchgame.com/ 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)
- gketuma 4y agoThis website brings me Joy. So elegant.
- jjk166 4y agoYeah, I wouldn't want every website to look like this but it's a very refreshing design that works super well.
- paulnpace 4y agoBut it's Johnny Cab - I hope you paid the fare!
- Sn0wCoder 4y agoCame 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.
- lnxg33k1 4y agoNot a web frontend developer, but added it to bookmarks because it's so awesome and enjoyable
- derkoe 4y agohttps://impress.js.org/ https://impress.js.org/ uses this extensively to create impressive presentations.
- awb 4y agoThe experience on mobile is really jumpy if you try to swipe or pinch zoom.
- bradwoodsio 4y agoThat's impressive
- dylan604 4y agoJust like overused Powerpoint transitions, I can see this getting old quickly.
- alanbernstein 4y agoI'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/ https://c4model.com/.
- dylan604 4y agoit 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
- ulrikrasmussen 4y agoDoesn't it look a bit like the opening credits to "Last Week Tonight"?
- dylan604 4y ago"Where to Next?" Don't worry, things hardly ever fuck up around here. That's the same guy, right?
- natelokers 4y agoI 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 http://gofoldit.com/abcdfegh and this is the tool where you create them http://gofoldit.com/demo http://gofoldit.com/demo
- kevmo314 4y agoMany years ago I wanted to build an Issuu-like PDF viewer (https://issuu.com/ 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 :)
- Our_Benefactors 4y agoWhen I pinched to zoom in, it changed the folding state of the brochure.
- bmicraft 4y agoWorks for me in firefox on X11
- Our_Benefactors 4y agoiOS safari
- andrecarini 4y agoHeavy aliasing on the borders for me. I wonder if it could be smoothed out with scale operations?
- vegabook 4y agoyes 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.
- jeromesalimao 4y agoThis is so cool.
- TazeTSchnitzel 4y agoLate 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 https://github.com/hikari-no-yume/obj-to-html
- mindover 4y agoAmazing! Love heavy CSS experiments
- modeless 4y agoEven 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/ https://playcanv.as/p/nzMF97vU/
- satvikpendem 4y agoThis 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 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.
- bradwoodsio 4y agoIf 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.
- gfd 4y agoIIRC three.js even supports using a CSS renderer out of the box: https://threejs.org/docs/#examples/en/renderers/CSS3DRenderer 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)
- ehsankia 4y agoI remember doing this back in 2012 using the matrix3d() https://ehsankia.com/css3/2.html https://ehsankia.com/css3/2.html Honestly surprised it still works
- lukaesch 4y agoI really enjoyed this website. There are many more interesting topics in addition to the 3D CSS stuff
- somishere 4y agoLoving 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 https://codepen.io/theprojectsomething/pen/JjLLJNx :)
- bradwoodsio 4y agoThey are slick
- greenSunglass 4y agoThe 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.
- bradwoodsio 4y agoAppreciate the feedback!
- zagrebian 4y agoDoes that website have an RSS feed?
- bradwoodsio 4y agoJust got 1 going - https://garden.bradwoods.io/rss.xml https://garden.bradwoods.io/rss.xml
- bradwoodsio 4y agoWorking on it.
- noduerme 4y agoI built an engine for my personal site (5-6 years back) along similar lines, with the idea being that elements are defined as "papers" of different sizes that are constantly being animated, and reshuffle themselves on window resize to different positions. (Try rotating it if you look on a phone or tablet). They're all 3d css (so the browser caches their content as bitmaps and renders them as such) and originally they did various flip effects as they moved, but I ended up ditching all but a slight amount of axis tilt on a few elements as it was hard to read and hard to position accurately in 2D space in relation to each other across a lot of screen sizes... https://thestrikeagency.com https://thestrikeagency.com [edit] I almost never show personal work here so I may delete this...
- Minor49er 4y agoThis 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
- noduerme 4y agoThanks 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.
- pvg 4y agoA 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.
- kylemh 4y agofwiw this website is stellar - check out all the other articles if you're a front-end dev!
- kaapipo 4y agoSliders don't work on mobile
- depressedpanda 4y agoHuh? They work fine for me.
- me_bx 4y agoI 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...
- berry_sortoro 4y ago[dead]
- deanc 4y agoBrad 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/ https://garden.bradwoods.io/
- bradwoodsio 4y agoThanks for the feedback!
- ly3xqhl8g9 4y agoSince 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 https://github.com/plurid/plurid [2] Demo, https://www.youtube.com/watch?v=aV7MWFDVFkk https://www.youtube.com/watch?v=aV7MWFDVFkk
- toughyear 4y agoThe website is well crafted. Anyone has a list of more such non-generic sites with content by developers?
- itsuka 4y agoThe 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-garden-directory https://github.com/MaggieAppleton/digital-gardeners#digital-...
- itsuka 4y agoHere's a longer list compiled by Nikita: https://wiki.nikiv.dev/other/wiki-workflow#similar-wikis-i-liked https://wiki.nikiv.dev/other/wiki-workflow#similar-wikis-i-l...
- KronisLV 4y ago> 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_view/index.html https://firefox-source-docs.mozilla.org/devtools-user/3d_vie...
- bleuarff 4y agoYes, that feature was really helpful for understanding stacking contexts (and debugging related issues). I don't know why it was abandoned.
- fuzzy2 4y agoIs 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.
- deleted 4y ago[deleted]
- neoberg 4y agoI 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 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 https://codepen.io/neoberg/pen/DEwwNE edit: Forgot about this one. https://codepen.io/neoberg/pen/doVQqv https://codepen.io/neoberg/pen/doVQqv
- rikroots 4y agoTracking 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
- spcebar 4y agoInteresting! You could use this to make some 'Mode 7'-like games.
- TheGoodBarn 4y agoI made a silly landing page for myself using some of the outline techniques. I think it looks fun: https://www.goodbarn.xyz/ https://www.goodbarn.xyz/ Its just a pure html page, so you can view page source and see how rugged it is.