#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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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