#css3d — Public Fediverse posts

So I saw a demo in the @codepen Spark and I liked the idea, but it was too JS-heavy for my taste, plus I would have preferred the rotation animations to be "hinged" around the top/ bottom edge depending on direction.

So I did it with pure #CSS on scroll https://codepen.io/thebabydino/pen/JoKqRjZ

cc @bramus

#cssScrollAnimation #scrollEffect #code #cssTransforms #cssTransform #css3D #3D #coding #frontend #cssLayout #web #dev #webDev #webDevelopment #cssGrid #cssFlex #flexbox #cssVariables #cssTransition

My most hearted @codepen demos of '26:

✨ Pure #CSS #3D animated carousel https://codepen.io/thebabydino/pen/dPXVyqN

✨ Scatter & #pixelate CSS gradient https://codepen.io/thebabydino/pen/zxBrmdL

✨ Cards with concave rounding on irregular grid https://codepen.io/thebabydino/pen/WbxpKPQ

First two need very little code and are heavily commented.

#SVG #filter #svgFilter #code #coding #cssTransform #cssTransforms #css3D #cssGradient #cssGrid #layout #cssLayout #cssSubgrid #frontend #web #dev #webDev #webDevelopment

A little pure #CSS #3D demo on @codepen: cubic honeycomb https://codepen.io/thebabydino/pen/yNGpxL

#css3D #cssTransform #cssTransforms #code #honeycomb #coding #frontend #web #dev #webDev #webDevelopment

3⃣ Pure CSS morphing polyhedra: dodecahedron → rhombicosidodecahedron → snub dodecahedron → rhombicosidodecahedron → icosahedron https://codepen.io/thebabydino/pen/gOjGyby

Positions & makes faces morph using CSS transforms. Which depend on CSS vars to keep code compact https://css-tricks.com/logical-operations-with-css-variables/

#CSS #3D #pureCSS #noJS #booleanLogic #cssVariables #transform #css3d #code #coding #frontend #web #dev #webDev #webDevelopment #polyhedra #maths #geometry #3dGeometry #mathematics #platonicSolids #Archimedean