Pure #CSS #3D chamfering sequence on @codepen: tetrahedron → chamfered tetrahedron → cube and back https://codepen.io/thebabydino/pen/MWVJVKE

Here's a little image gallery demo I made on @codepen
https://codepen.io/thebabydino/pen/LEYrVaE

Almost pure #CSS. Minimal #JS for changing the index of the current image on click.

For the how ensuring the #3D rotated side images have a given 2D projection on the screen, see https://stackoverflow.com/a/75063640/1397351

I turn 13 on @codepen in June, so here are my 13 most hearted demos:

1092 #CSS infinite #scroll gallery https://codepen.io/thebabydino/pen/XJrYqGb - my only demo to ever get to 1K without being in most hearted of the year first

mostly CSS scroll-driven animations + tiniest bit of JS (~200 bytes for infinity part)

Someone just hearted this demo I made on @codepen back in 2018 and I noticed it still said it only works in Blink browsers.
https://codepen.io/thebabydino/pen/BPxYBr

Not anymore! As of the summer of '24, Firefox also supports registering & animating custom properties! So this is now cross-browser!

#Development #Fun
CSS lessons for your parking fails · Proper car positioning may be easier than you think https://ilo.im/161t84

_____
#Positioning #Spacing #CssFloat #CssTransform #CssFlexbox #CssGrid #Development #WebDev #Frontend #CSS