I 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...<p><a href="https://thestrikeagency.com" rel="nofollow">https://thestrikeagency.com</a><p>[edit] I almost never show personal work here so I may delete this...
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<p>here is the output
<a href="http://gofoldit.com/abcdfegh" rel="nofollow">http://gofoldit.com/abcdfegh</a><p>and this is the tool where you create them<p><a href="http://gofoldit.com/demo" rel="nofollow">http://gofoldit.com/demo</a>
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: <a href="https://github.com/hikari-no-yume/obj-to-html">https://github.com/hikari-no-yume/obj-to-html</a>
<a href="https://impress.js.org/" rel="nofollow">https://impress.js.org/</a> uses this extensively to create impressive presentations.
I did some 3d css demos back in 2013. This one got quite popular so maybe you might've seen it:<p>3D Macbook Air animation: <a href="https://codepen.io/neoberg/pen/DEZbKv" rel="nofollow">https://codepen.io/neoberg/pen/DEZbKv</a><p>This one I think is more impressive but doesn't look as beautiful: <a href="https://codepen.io/neoberg/pen/DEwwNE" rel="nofollow">https://codepen.io/neoberg/pen/DEwwNE</a><p>edit: Forgot about this one. <a href="https://codepen.io/neoberg/pen/doVQqv" rel="nofollow">https://codepen.io/neoberg/pen/doVQqv</a>
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: <a href="https://playcanv.as/p/nzMF97vU/" rel="nofollow">https://playcanv.as/p/nzMF97vU/</a>
Loving the format! Tho to note the controls are a little (tiny bit) fiddly on FF.<p>Throwing my hat in ~ some basic / not-particularly-optimised 3d CSS hover state icons I made for my CV a few months ago: <a href="https://codepen.io/theprojectsomething/pen/JjLLJNx" rel="nofollow">https://codepen.io/theprojectsomething/pen/JjLLJNx</a> :)
This is cool but if you haven't already, check out what Three.js can do in the browser: <a href="https://codesandbox.io/s/lxvqek?file=/src/App.js" rel="nofollow">https://codesandbox.io/s/lxvqek?file=/src/App.js</a><p>This is using a wrapper called react-three-fiber to make the code more declarative rather than imperative.
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.
Since 2015 I have been thinking how to explore information as a 3D structure. This thought has led to developing <i>plurid</i> [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.<p>[1] Code, <a href="https://github.com/plurid/plurid">https://github.com/plurid/plurid</a><p>[2] Demo, <a href="https://www.youtube.com/watch?v=aV7MWFDVFkk">https://www.youtube.com/watch?v=aV7MWFDVFkk</a>
I remember doing this back in 2012 using the matrix3d()<p><a href="https://ehsankia.com/css3/2.html" rel="nofollow">https://ehsankia.com/css3/2.html</a><p>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.<p>Over the years I've seen many, many terrible implementations of that effect with JavaScript.<p>The correct and highly performant way to do that is using perspective. It's an effect that can be done entirely in css.
> 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.<p>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.<p>I think Firefox actually used to have that, though it was removed: <a href="https://firefox-source-docs.mozilla.org/devtools-user/3d_view/index.html" rel="nofollow">https://firefox-source-docs.mozilla.org/devtools-user/3d_vie...</a>
Tracking mouse movement over a CSS 3d rotated canvas element can be fun<p><a href="https://scrawl-v8.rikweb.org.uk/demo/dom-013.html" rel="nofollow">https://scrawl-v8.rikweb.org.uk/demo/dom-013.html</a>
I made a silly landing page for myself using some of the outline techniques. I think it looks fun: <a href="https://www.goodbarn.xyz/" rel="nofollow">https://www.goodbarn.xyz/</a><p>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 <i>good</i>.
Brad has a large collection of excellent articles written to educate on topics [1]. Don't miss the others, there are some real gems.<p>[1] <a href="https://garden.bradwoods.io/" rel="nofollow">https://garden.bradwoods.io/</a>