#csstransforms — 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

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

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

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

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

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

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

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

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

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

7️⃣ 749 ❤️ Pure #CSS Möbius 6hedrons https://codepen.io/thebabydino/pen/mJojKd

The how behind I live coded it in 30 minutes https://css-tricks.com/how-i-live-coded-my-most-hearted-codepen-demo/

Could be improved with CSS variables nowadays, see https://css-tricks.com/simplifying-css-cubes-custom-properties/ as well as by using CSS trigonometric functions.

#3D #Maths #geometry #cssTransform #cssTransforms #trigonometry #code #web #dev #webDev #webDevelopment #coding #frontend

7️⃣ 749 ❤️ Pure #CSS Möbius 6hedrons https://codepen.io/thebabydino/pen/mJojKd

The how behind I live coded it in 30 minutes https://css-tricks.com/how-i-live-coded-my-most-hearted-codepen-demo/

Could be improved with CSS variables nowadays, see https://css-tricks.com/simplifying-css-cubes-custom-properties/ as well as by using CSS trigonometric functions.

#3D #Maths #geometry #cssTransform #cssTransforms #trigonometry #code #web #dev #webDev #webDevelopment #coding #frontend

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

#cssTransforms #cssTransform #coding #web #dev #webDev #webDevelopment #code #frontend #Maths #geometry

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

#cssTransforms #cssTransform #coding #web #dev #webDev #webDevelopment #code #frontend #Maths #geometry

3️⃣ 1044 ♥️ Pure #CSS gravity button https://codepen.io/thebabydino/pen/bGzeQrv - a bit mixed about it, it was just an exercise in getting a certain result - don't use it in the wild!

My first ever @codepen demo to get to 1K ♥️. And it got copied left and right.
¯\_(ツ)_/¯

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

3️⃣ 1044 ♥️ Pure #CSS gravity button https://codepen.io/thebabydino/pen/bGzeQrv - a bit mixed about it, it was just an exercise in getting a certain result - don't use it in the wild!

My first ever @codepen demo to get to 1K ♥️. And it got copied left and right.
¯\_(ツ)_/¯

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

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

1️⃣ 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)

#cssVariables #cssTransforms #coding #code #frontend #cssTransform #3D #web #webDev #webDevelopment #dev #maths #mathematics #geometry #filter

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

1️⃣ 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)

#cssVariables #cssTransforms #coding #code #frontend #cssTransform #3D #web #webDev #webDevelopment #dev #maths #mathematics #geometry #filter

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! 🎉🥳

#CSS #3D #cssTransforms #cssTransform #neon #rainbow #code #coding #frontend #web #webDevelopment #dev #webDev

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! 🎉🥳

#CSS #3D #cssTransforms #cssTransform #neon #rainbow #code #coding #frontend #web #webDevelopment #dev #webDev

Haven't had it in me to do anything for the past week's #CodePenChallenge, so here's a demo from earlier this year that fits: #CSS infinite scroll gallery https://codepen.io/thebabydino/pen/XJrYqGb

One of my most hearted demos ever & my only one to get over 1000 ❤️ without being in the most hearted of previous year.

#SVG #cssGrid #scrollAnimation #filter #svgFilter #cssFilter #cssLayout #3D #cssTransforms #code #coding #frontend #web #dev #webDev #webDevelopment

Haven't had it in me to do anything for the past week's #CodePenChallenge, so here's a demo from earlier this year that fits: #CSS infinite scroll gallery https://codepen.io/thebabydino/pen/XJrYqGb

One of my most hearted demos ever & my only one to get over 1000 ❤️ without being in the most hearted of previous year.

#SVG #cssGrid #scrollAnimation #filter #svgFilter #cssFilter #cssLayout #3D #cssTransforms #code #coding #frontend #web #dev #webDev #webDevelopment

I made a thing: scroll-driven, almost pure #CSS infinite circular gallery rotation - check it out on @codepen
https://codepen.io/thebabydino/pen/XJrYqGb

Using scroll-driven animations and the tiniest bit of JS for the infinity part of it.

Made with 🖤 for this week's #CodePenChallenge.

cc @bramus

#SVG #cssGrid #scrollAnimation #filter #svgFilter #cssFilter #cssLayout #3D #cssTransforms #code #coding #frontend #web #dev #webDev #webDevelopment

I made a thing: scroll-driven, almost pure #CSS infinite circular gallery rotation - check it out on @codepen
https://codepen.io/thebabydino/pen/XJrYqGb

Using scroll-driven animations and the tiniest bit of JS for the infinity part of it.

Made with 🖤 for this week's #CodePenChallenge.

cc @bramus

#SVG #cssGrid #scrollAnimation #filter #svgFilter #cssFilter #cssLayout #3D #cssTransforms #code #coding #frontend #web #dev #webDev #webDevelopment

A little pure #CSS 🌟🎄 #animation I made on @codepen a few years ago https://codepen.io/thebabydino/pen/bGwYVOm

#3D #transform #cssTransforms #code #cssAnimation #coding #frontend #xmas #web #dev #webDevlopment #webDev #tree #stars

A little pure #CSS 🌟🎄 #animation I made on @codepen a few years ago https://codepen.io/thebabydino/pen/bGwYVOm

#3D #transform #cssTransforms #code #cssAnimation #coding #frontend #xmas #web #dev #webDevlopment #webDev #tree #stars

Because I came across a question on reddit https://www.reddit.com/r/css/comments/1h05nxx/comment/lz2u77w/

One common gotcha with #CSS 3D transforms is using opacity < 1 on an element that should have 3D transformed children. This effectively flattens all the semi-transparent element's children into the plane of their parent.

#3D #transform #cssTransforms #css3D
#web #dev #webDev #webDevelopment #code #coding #frontend

Because I came across a question on reddit https://www.reddit.com/r/css/comments/1h05nxx/comment/lz2u77w/

One common gotcha with #CSS 3D transforms is using opacity < 1 on an element that should have 3D transformed children. This effectively flattens all the semi-transparent element's children into the plane of their parent.

#3D #transform #cssTransforms #css3D
#web #dev #webDev #webDevelopment #code #coding #frontend

Another super old @codepen demo I redid with modern #CSS is this yummy menu https://codepen.io/thebabydino/pen/AoxZQq

CSS grid instead of absolute positioning, clip-path instead of nested skew and un-skew, CSS variables to avoid setting a separate transform chain on each item... and more!

#gridLayout #cssGrid #clipPath #clipping #cssTransforms #cssVariables #coding #code #frontend #webDevelopment #web #dev #webDev

Another super old @codepen demo I redid with modern #CSS is this yummy menu https://codepen.io/thebabydino/pen/AoxZQq

CSS grid instead of absolute positioning, clip-path instead of nested skew and un-skew, CSS variables to avoid setting a separate transform chain on each item... and more!

#gridLayout #cssGrid #clipPath #clipping #cssTransforms #cssVariables #coding #code #frontend #webDevelopment #web #dev #webDev

Another request, mastodon 🦣

If you can test in Safari, can you let me know what the second (moving) line looks like for you?

https://codepen.io/thebabydino/pen/JjgdLQL?editors=1100

Cyan like expected/ Chrome/ Firefox? Lime like what I'm seeing with Epiphany?

Boosts appreciated if you cannot test. Thanks! 🙏

#CSS #blending #blendMode #cssTransforms #code #coding #web #dev #frontend #webDevelopment #webDev

Another request, mastodon 🦣

If you can test in Safari, can you let me know what the second (moving) line looks like for you?

https://codepen.io/thebabydino/pen/JjgdLQL?editors=1100

Cyan like expected/ Chrome/ Firefox? Lime like what I'm seeing with Epiphany?

Boosts appreciated if you cannot test. Thanks! 🙏

#CSS #blending #blendMode #cssTransforms #code #coding #web #dev #frontend #webDevelopment #webDev

Because I saw someone hearted https://codepen.io/thebabydino/pen/zKLOpb I got reminded of something I need for animations like this one: to be able to use #CSS vars to compute keyframe percentages.

I have 16 columns, each with a different animation. They're different because the keyframes needs to be different depending on the index.

#cssAnimation #cssVariables #keyframes #cssTransforms #code #coding #frontend #web #webDevelopment #webDev #dev

Because I saw someone hearted https://codepen.io/thebabydino/pen/zKLOpb I got reminded of something I need for animations like this one: to be able to use #CSS vars to compute keyframe percentages.

I have 16 columns, each with a different animation. They're different because the keyframes needs to be different depending on the index.

#cssAnimation #cssVariables #keyframes #cssTransforms #code #coding #frontend #web #webDevelopment #webDev #dev

I've just seen a bunch of my demos "trending" on @codepen.

✨ stroke shadow wave 🌊
✨ no matrix gooey effect
✨ slice 🗡️
✨ here is real magic 🧞
✨ slice & offset 🔪
✨ dizzy 3D 🥴
✨ blended layers
✨ split text effect
✨ realistic grainy shadows

...just on the first 5 pages! 🤯

#SVG #CSS #filter #svgFilter #3D #transform #cssTransforms #cssGradient #code #coding #web #webDev #webDevelopment #frontend

I've just seen a bunch of my demos "trending" on @codepen.

✨ stroke shadow wave 🌊
✨ no matrix gooey effect
✨ slice 🗡️
✨ here is real magic 🧞
✨ slice & offset 🔪
✨ dizzy 3D 🥴
✨ blended layers
✨ split text effect
✨ realistic grainy shadows

...just on the first 5 pages! 🤯

#SVG #CSS #filter #svgFilter #3D #transform #cssTransforms #cssGradient #code #coding #web #webDev #webDevelopment #frontend

Because someone hearted this again: a demo I did over a decade ago on @codepen - a pure #CSS poster getting rolled and unrolled again.

https://codepen.io/thebabydino/pen/AVrGxM

#3D #geometry #maths #code #mathematics #coding #transform #cssTransforms #frontend #web #webDev #dev #webDevelopment

Because someone hearted this again: a demo I did over a decade ago on @codepen - a pure #CSS poster getting rolled and unrolled again.

https://codepen.io/thebabydino/pen/AVrGxM

#3D #geometry #maths #code #mathematics #coding #transform #cssTransforms #frontend #web #webDev #dev #webDevelopment

Bonus:

1⃣3⃣ Pure #CSS winter scene https://codepen.io/thebabydino/pen/vpyPmN

(actual demo looking better than the choppy gif)

#3D #geometry #mathematics #maths #css3d #code #coding #frontend #web #dev #webDev #webDevelopment #cssTransforms #transform

Bonus:

1⃣3⃣ Pure #CSS winter scene https://codepen.io/thebabydino/pen/vpyPmN

(actual demo looking better than the choppy gif)

#3D #geometry #mathematics #maths #css3d #code #coding #frontend #web #dev #webDev #webDevelopment #cssTransforms #transform

A little pure #CSS 3D demo I made on @codepen last year: torus knot out of neon tiles https://codepen.io/thebabydino/pen/poqmrNg

I saw this @beesandbombs .gif https://x.com/beesandbombs/status/1497594041164185608 and got the idea I could CSS something like it, but then I never got to posting it publicly...

#torusknot #3D #geometry #topology #knotTheory #maths #mathematics #cssMaths #code #coding #frontend #web #dev #webDev #webDevelopment #cssTransforms

A little pure #CSS 3D demo I made on @codepen last year: torus knot out of neon tiles https://codepen.io/thebabydino/pen/poqmrNg

I saw this @beesandbombs .gif https://x.com/beesandbombs/status/1497594041164185608 and got the idea I could CSS something like it, but then I never got to posting it publicly...

#torusknot #3D #geometry #topology #knotTheory #maths #mathematics #cssMaths #code #coding #frontend #web #dev #webDev #webDevelopment #cssTransforms

1⃣2⃣ 442 ❤️ Pure #CSS 3D cube assembly https://codepen.io/thebabydino/pen/GNYvbZ

Second proper 3D demo on this list. The only more complex one. Also quite old, so code is dated, could be improved with modern CSS.

And that's a wrap! My 12 most popular demos over the course of 12 years on CodePen.

#3D #css3D #transform #cssTransforms #code #coding #frontend #web #webDev #dev #webDevelopment

1⃣2⃣ 442 ❤️ Pure #CSS 3D cube assembly https://codepen.io/thebabydino/pen/GNYvbZ

Second proper 3D demo on this list. The only more complex one. Also quite old, so code is dated, could be improved with modern CSS.

And that's a wrap! My 12 most popular demos over the course of 12 years on CodePen.

#3D #css3D #transform #cssTransforms #code #coding #frontend #web #webDev #dev #webDevelopment

But now, we can compute the scaling factor as the cosine of the skew angle, animate the skew angle* and the scaling factor changes accordingly 🥳🎉

*@​property support needed

#css #trigonometry #CodePen #coding #maths #geometry #webDev #webDevelopment #transform #CSStransforms #tiling

But now, we can compute the scaling factor as the cosine of the skew angle, animate the skew angle* and the scaling factor changes accordingly 🥳🎉

*@​property support needed

#css #trigonometry #CodePen #coding #maths #geometry #webDev #webDevelopment #transform #CSStransforms #tiling

#css #csstransforms #svg Neufassung unseres mehrteiligen Tutorials: https://wiki.selfhtml.org/wiki/Transform
Feedback erbeten!