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

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

There are n equally sized items arranged in half a circle on the left, from top to bottom, with the same gap g in between. How do you do it? Cross-browser, same #CSS (≤20 declarations) should work when changing their number/ gap.

Try to code it yourself before checking my solution https://www.reddit.com/r/Frontend/comments/1oi4dfe/comment/nlzvlry/

Live on @codepen: https://codepen.io/thebabydino/pen/ZYQjZwq

#Maths #geometry #trigonometry #code #cssMaths #coding #frontend #cssLayout #webDev #webDevelopment #web #dev #cssGrid #cssTransform #cssVariables

There are n equally sized items arranged in half a circle on the left, from top to bottom, with the same gap g in between. How do you do it? Cross-browser, same #CSS (≤20 declarations) should work when changing their number/ gap.

Try to code it yourself before checking my solution https://www.reddit.com/r/Frontend/comments/1oi4dfe/comment/nlzvlry/

Live on @codepen: https://codepen.io/thebabydino/pen/ZYQjZwq

#Maths #geometry #trigonometry #code #cssMaths #coding #frontend #cssLayout #webDev #webDevelopment #web #dev #cssGrid #cssTransform #cssVariables

Because someone just hearted this demo I made over half a decade ago on @codepen:

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

It's a pure #CSS Platonic solids gallery. They animate on hover/ tap. All is computed, there are no magic numbers.

#Maths #3D #Geometry #trigonometry #clipPath #cssClipPath #code #frontend #web #dev #webDev #webDevelopment #coding #transform #cssTransform #css3D

Because someone just hearted this demo I made over half a decade ago on @codepen:

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

It's a pure #CSS Platonic solids gallery. They animate on hover/ tap. All is computed, there are no magic numbers.

#Maths #3D #Geometry #trigonometry #clipPath #cssClipPath #code #frontend #web #dev #webDev #webDevelopment #coding #transform #cssTransform #css3D

BTW, the CSS is heavily commented. And I've changed the images to something a bit more fitting for this time of year.

https://codepen.io/thebabydino/details/WbrjrZM

And now you can tell what gave me the idea for yesterday's challenge https://mastodon.social/@anatudor/115337483292849914

#CSS #Maths #layout #cssLayout #cssGrid #trigonometry #code #coding #frontend #transform #cssTransform #cssClipPath #clipping #clipPath #containerQueries #containerQuery #webDevelopment #web #dev #webDev

BTW, the CSS is heavily commented. And I've changed the images to something a bit more fitting for this time of year.

https://codepen.io/thebabydino/details/WbrjrZM

And now you can tell what gave me the idea for yesterday's challenge https://mastodon.social/@anatudor/115337483292849914

#CSS #Maths #layout #cssLayout #cssGrid #trigonometry #code #coding #frontend #transform #cssTransform #cssClipPath #clipping #clipPath #containerQueries #containerQuery #webDevelopment #web #dev #webDev

Because this got asked on reddit https://www.reddit.com/r/css/comments/1o069yi/comment/ni8evf4/

Made a demo with various options for angled grid columns. Uses mathematical computations to ensure all fits just right all the time, regardless of viewport or number of columns.

On @codepen https://codepen.io/thebabydino/pen/WbrjrZM

Enjoy!

#CSS #Maths #layout #cssLayout #cssGrid #trigonometry #code #coding #frontend #transform #cssTransform #cssClipPath #clipping #clipPath #containerQueries #containerQuery #webDevelopment #web #dev #webDev

Because this got asked on reddit https://www.reddit.com/r/css/comments/1o069yi/comment/ni8evf4/

Made a demo with various options for angled grid columns. Uses mathematical computations to ensure all fits just right all the time, regardless of viewport or number of columns.

On @codepen https://codepen.io/thebabydino/pen/WbrjrZM

Enjoy!

#CSS #Maths #layout #cssLayout #cssGrid #trigonometry #code #coding #frontend #transform #cssTransform #cssClipPath #clipping #clipPath #containerQueries #containerQuery #webDevelopment #web #dev #webDev

I turn 13 on @codepen today, so after my most hearted demos (https://mastodon.social/@anatudor/114499264888606204)... here are 13 of MY personal faves!

1️⃣ Pure CSS music toy - this one's a really special one for me https://codepen.io/thebabydino/pen/WNGPjLx
#CSS transforms for the #3D, CSS variables for the dynamic shading.

The how 😼 https://www.youtube.com/watch?v=_CV364uqP3U

#css3d #transform #cssTransform #filter #cssFilter #frontend #code #coding #web #dev #webDev #webDevelopment

I turn 13 on @codepen today, so after my most hearted demos (https://mastodon.social/@anatudor/114499264888606204)... here are 13 of MY personal faves!

1️⃣ Pure CSS music toy - this one's a really special one for me https://codepen.io/thebabydino/pen/WNGPjLx
#CSS transforms for the #3D, CSS variables for the dynamic shading.

The how 😼 https://www.youtube.com/watch?v=_CV364uqP3U

#css3d #transform #cssTransform #filter #cssFilter #frontend #code #coding #web #dev #webDev #webDevelopment

A little something on @codepen: pure #CSS icosphere of spheres https://codepen.io/thebabydino/pen/poYRGmV

Very little code and I should be able to make the algorithm even more efficient. Pure CSS shading too.

#CodePenChallenge #CodePen #3D #code #geometry #maths #mathematics #coding #recursion #cssGradient #frontend #web #dev #webDev #webDevelopment #transform #css3D #cssTransform #cssVariables

A little something on @codepen: pure #CSS icosphere of spheres https://codepen.io/thebabydino/pen/poYRGmV

Very little code and I should be able to make the algorithm even more efficient. Pure CSS shading too.

#CodePenChallenge #CodePen #3D #code #geometry #maths #mathematics #coding #recursion #cssGradient #frontend #web #dev #webDev #webDevelopment #transform #css3D #cssTransform #cssVariables

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

Here's a super simple pure #CSS #3D hover effect on @codepen https://codepen.io/thebabydino/pen/ZYYXGLR

*Heavily* commented, every coding choice explained.

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

Here's a super simple pure #CSS #3D hover effect on @codepen https://codepen.io/thebabydino/pen/ZYYXGLR

*Heavily* commented, every coding choice explained.

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

Losing it. This demo is broken in a very weird way in Chrome (all fine for Firefox & Epiphany).

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

The shape is made up of 3 parts = 1 octagonal prism + 2 square cupolae.

The faces of only one of the two square cupolae are flattened in the parent plane. Can't get it. #CSS #code #coding #frontend #web #dev #webDev #webDevelopment #3d #transform #css3d #cssTransform

Losing it. This demo is broken in a very weird way in Chrome (all fine for Firefox & Epiphany).

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

The shape is made up of 3 parts = 1 octagonal prism + 2 square cupolae.

The faces of only one of the two square cupolae are flattened in the parent plane. Can't get it. #CSS #code #coding #frontend #web #dev #webDev #webDevelopment #3d #transform #css3d #cssTransform

A fun little scroll-driven thing I made. The text is white over the image, but the image isn't static, it rotates on scroll. 😼

Here's a detailed explanation of the how behind https://www.reddit.com/r/css/comments/1jyu76v/comment/mn2fibt/

Live on @codepen https://codepen.io/thebabydino/pen/dPPbmao

Also uses container queries, CSS trigonometric functions.

#CSS #scroll #cssAnimation #code #web #scrollAnimation #frontend #coding #dev #cssVariables #cssTransform #webDev #webDevelopment #cssMaths #trigonometry

A fun little scroll-driven thing I made. The text is white over the image, but the image isn't static, it rotates on scroll. 😼

Here's a detailed explanation of the how behind https://www.reddit.com/r/css/comments/1jyu76v/comment/mn2fibt/

Live on @codepen https://codepen.io/thebabydino/pen/dPPbmao

Also uses container queries, CSS trigonometric functions.

#CSS #scroll #cssAnimation #code #web #scrollAnimation #frontend #coding #dev #cssVariables #cssTransform #webDev #webDevelopment #cssMaths #trigonometry

Fun Safari bug 🪲: `drop-shadow()` does't take transforms into account https://bugs.webkit.org/show_bug.cgi?id=218734 👀

#CSS #bug #cssBug #SafariBug #coding #web #dev #webDev #webDevelopment #code #frontend #cssTransform #cssFilter #filter

Fun Safari bug 🪲: `drop-shadow()` does't take transforms into account https://bugs.webkit.org/show_bug.cgi?id=218734 👀

#CSS #bug #cssBug #SafariBug #coding #web #dev #webDev #webDevelopment #code #frontend #cssTransform #cssFilter #filter

Because someone just hearted this decade old @codepen.io #3D demo, I gave it a quick 2025 remake using ✳️ modern #CSS features ✳️ - grid instead of `position: absolute`, CSS variables to avoid setting multiple properties in Sass loops, `color-mix()` and more!

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

Based on a GIF by @sasj, originally CSS-ed 9+ years ago live on CodePen in 10 minutes and 50 lines of SCSS. Now the code is even more compact.

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

Because someone just hearted this decade old @codepen.io #3D demo, I gave it a quick 2025 remake using ✳️ modern #CSS features ✳️ - grid instead of `position: absolute`, CSS variables to avoid setting multiple properties in Sass loops, `color-mix()` and more!

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

Based on a GIF by @sasj, originally CSS-ed 9+ years ago live on CodePen in 10 minutes and 50 lines of SCSS. Now the code is even more compact.

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

Another little @codepen demo: pure #CSS double ball 🎱 helix https://codepen.io/thebabydino/pen/JreoKw

(yet another demo that cold be simplified by the `position: absolute` to `display: grid` switch for stacking and in the future, further simplified by `sibling-index()`)

#3D #helix #cssTransform #code #coding #web #dev #webDev #webDevelopment #frontend

Another little @codepen demo: pure #CSS double ball 🎱 helix https://codepen.io/thebabydino/pen/JreoKw

(yet another demo that cold be simplified by the `position: absolute` to `display: grid` switch for stacking and in the future, further simplified by `sibling-index()`)

#3D #helix #cssTransform #code #coding #web #dev #webDev #webDevelopment #frontend

For example, nowadays I wouldn't use `position: absolute` + offsets + negative `margin` 🫤 to stack and place elements in the middle before applying transforms to position them in 3D.

I would use grid now. 😻

https://mastodon.social/@anatudor/110712771208508567

#3D #css3D #cssTransform #code #coding #web #dev #webDev #webDevelopment #frontend #CSS

For example, nowadays I wouldn't use `position: absolute` + offsets + negative `margin` 🫤 to stack and place elements in the middle before applying transforms to position them in 3D.

I would use grid now. 😻

https://mastodon.social/@anatudor/110712771208508567

#3D #css3D #cssTransform #code #coding #web #dev #webDev #webDevelopment #frontend #CSS

Someone hearted this old thing https://codepen.io/thebabydino/pen/GNYvbZ on @codepen and I noticed it said Chrome-only - tested and it's not the case anymore, it works cross-browser.

Do note that it's 8+ years old, before #CSS variables, grid, newer functions and could be much simplified using these.

#3D #css3D #cssTransform #code #coding #web #dev #webDev #webDevelopment #frontend

Someone hearted this old thing https://codepen.io/thebabydino/pen/GNYvbZ on @codepen and I noticed it said Chrome-only - tested and it's not the case anymore, it works cross-browser.

Do note that it's 8+ years old, before #CSS variables, grid, newer functions and could be much simplified using these.

#3D #css3D #cssTransform #code #coding #web #dev #webDev #webDevelopment #frontend

Please don't do this for a marquee effect 😭

So many problems with it. 2 animations are completely unnecessary. You should animate translation, not left.

+it's possible without duplication, especially in non-clickable icons case like here, where the idea was to emulate the Jamstack infinitely sliding longos - see this @codepen demo https://codepen.io/thebabydino/pen/bGPzdaM

#CSS #SVG #filter #svgFilter #marquee #code #coding #frontend #cssTransform #web #dev #webDev #webDevelopment

Please don't do this for a marquee effect 😭

So many problems with it. 2 animations are completely unnecessary. You should animate translation, not left.

+it's possible without duplication, especially in non-clickable icons case like here, where the idea was to emulate the Jamstack infinitely sliding longos - see this @codepen demo https://codepen.io/thebabydino/pen/bGPzdaM

#CSS #SVG #filter #svgFilter #marquee #code #coding #frontend #cssTransform #web #dev #webDev #webDevelopment

Quick #CSS #3D carousel on @codepen https://codepen.io/thebabydino/pen/eYXqLdb

Auto-rotates on load, but it can also be paused and navigated through via the buttons.

Minimal JS. All 3D is CSS. Heavily commented.

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

Quick #CSS #3D carousel on @codepen https://codepen.io/thebabydino/pen/eYXqLdb

Auto-rotates on load, but it can also be paused and navigated through via the buttons.

Minimal JS. All 3D is CSS. Heavily commented.

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

Because someone just hearted this #3D demo on @codepen
https://codepen.io/thebabydino/pen/wvybyMo

This was one of the very first demos I made using #CSS trigonometric functions back in '22. They were only supported by Safari at that point and it was a lot of trouble to get to actually try this as I'm on Linux.

#maths #trigonometry #mathematics #cssMaths #code #coding #frontend #web #dev #webDev #webDevelopment #css3D #cssTransform

Because someone just hearted this #3D demo on @codepen
https://codepen.io/thebabydino/pen/wvybyMo

This was one of the very first demos I made using #CSS trigonometric functions back in '22. They were only supported by Safari at that point and it was a lot of trouble to get to actually try this as I'm on Linux.

#maths #trigonometry #mathematics #cssMaths #code #coding #frontend #web #dev #webDev #webDevelopment #css3D #cssTransform

#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

#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