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

Hi, Mastodon 🦣 - could you help me out?

If you can test in actual Safari, is this on-scroll demo glitchy there too like it is for me in Epiphany?

https://cdpn.io/pen/debug/JoKqRjZ

If you cannot test in actual Safari, boosts appreciated.

Thank you! 🙏

PS - Yes, I know it doesn't work in Firefox, it's because of this bug some rando filed a couple of years ago... https://bugzilla.mozilla.org/show_bug.cgi?id=1927325

#CSS #cssScrollAnimation #code #coding #web #dev #webDev #webDevelopment #frontend #cssAnimation #cssTransforms

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

Pure #CSS #3D demo on @codepen: polyhedra morphing sequence https://codepen.io/thebabydino/pen/abmNveW

Absolutely no magic numbers, everything computed.

See Pen description for the how behind 😼

#transform #cssTransform #polyhedron #cssTransforms #polyhedra #octahedron #tetrahedron #cube #Maths #geometry #cssVariables #code #coding #frontend #web #dev #webDev #webDevelopment

Exploding triakis octahedron (short pyramids added on top of the faces) turning into an excavated octahedron (short pyramids dug into the faces) with pure #CSS #3D - live on @codepen: https://codepen.io/thebabydino/pen/DyrNrL

#Maths #geometry #polyhedra #css3D #cssTransform #cssTransforms #coding #code #transform #frontend #cssMaths #Sass #web #dev #webDevelopment #webDev #trigonometry #polyhedron #octahedron

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

One of my earliest #CSS #3D demos on @codepen: how to (de)construct a dodecahedron https://codepen.io/thebabydino/pen/ALQVQe

A dodecahedron is one of the 5 regular polyhedra = made up of only identical regular polygon faces. Regular polygons have all edge lengths and vertex angles equal.

#geometry #Maths #code #coding #css3D #cssTransforms #transform #frontend #polyhedron #polyhedra #PlatonicSolid #dodecahedron #cssAnimation #web #dev #webDev #webDevelopment #trigonometry #Sass #SCSS

postcss-color-golf plugin 1.2.0 released!
https://github.com/xero/postcss-color-golf/releases/tag/1.2.0

rgb(255,0,0) → red
aliceblue → #f0f8ff
#aabbcc → #abc;
rgba(255, 170, 187) → #fab
rgba(255, 170, 187, 0.8) → #fabcc
rgb(255, 255, 255, 1) → #fff
rgb(0, 255, 0, 0.8) → #0f0c
fuchsia → #f0f

#postcss #css #csstransforms #color #codegolf #golf #plugin

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

#geometry #maths #css3D #CSSclipPath #cssTransform #cssTransforms #coding #web #dev #webDev #webDevelopment