#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

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 chamfering sequence on @codepen cube → chamfered cube → rhombic dodecahedron and back

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

Chamfer? WTF is that?

Well, check out the Pen description https://codepen.io/thebabydino/details/rNdjLdq and this page https://en.wikipedia.org/wiki/Chamfer_(geometry)

#Maths #geometry #css3D #transform #chamfer #polyhedron #polyhedra #cube #rhombicDodecahedron #code #coding #web #dev #webDev #webDevelopment

Pure #CSS #3D chamfering sequence on @codepen cube → chamfered cube → rhombic dodecahedron and back

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

Chamfer? WTF is that?

Well, check out the Pen description https://codepen.io/thebabydino/details/rNdjLdq and this page https://en.wikipedia.org/wiki/Chamfer_(geometry)

#Maths #geometry #css3D #transform #chamfer #polyhedron #polyhedra #cube #rhombicDodecahedron #code #coding #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

If you're a Cheetah+ supporter on Ko-fi or Patreon, then first of all thank you for helping me stay afloat during these times.

And second, I just posted a cool little pure CSS 3D thing.

Ko-fi: https://ko-fi.com/post/Pure-CSS-3D-parallax-on-scroll-H2H31MUQ0J

Patreon: https://www.patreon.com/posts/pure-css-3d-on-141272441

#CSS #scroll #3D #SVG #filter #css3d #svgFilter #scrollAnimation #code #web #dev #webDev #webDevelopment #frontend #coding

If you're a Cheetah+ supporter on Ko-fi or Patreon, then first of all thank you for helping me stay afloat during these times.

And second, I just posted a cool little pure CSS 3D thing.

Ko-fi: https://ko-fi.com/post/Pure-CSS-3D-parallax-on-scroll-H2H31MUQ0J

Patreon: https://www.patreon.com/posts/pure-css-3d-on-141272441

#CSS #scroll #3D #SVG #filter #css3d #svgFilter #scrollAnimation #code #web #dev #webDev #webDevelopment #frontend #coding

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

It's definitely not perfect but I made a thing! It's a shiny card effect 🎴 with 3d perspective, done in mostly-pure CSS with a bit of Javascript for cursor positions etc.

📱 Doesn't work very well on mobile at the moment though - it's on my todo list.

In other news, CSS container queries are both fun, useful, and confusing. 📦📦📦

https://starbeamrainbowlabs.com/labs/shinycard.html

#HowDoITag #IDontEvenKnowIJustPostHere #Noodling #WebNoodling #NoodlingAround #CSS #CssVariables #WereUsed #AndAbused #CSS3D

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

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

Another diagram I tried this motion path, 3D CSS, and switching 'viewport' angles is conveying the reaction difference of drivers between near-side and far-side traffic lights.

This works with CSS while toggling different views of it with a has(). No Javascript needed.

#CSS #webdev #cssmotionpath #css3d

Combining CSS Motion Path and 3D CSS to make a running Pomeranian

Coding this made me think of other diagrams where it's quite easy to switch from 2D to descriptive geometric visuals :D

#CSS #css3d #cssmotionpath #webdev

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

Flip card on hover, flip back on hover out...

... but on touchscreens, flip it on click and then flip it back on second click!

A mostly #CSS solution, using #3D transforms, variables, grid, pointer MQ + a little bit of #JS.

Because somebody asked how to do it https://www.reddit.com/r/css/comments/1jm0a7v/comment/mk7zmd5/

Live demo on @codepen: https://codepen.io/thebabydino/pen/MYWPeer

#cssGrid #cssVariables #JavaScript #css3D #code #coding #frontend #cssLayout #web #dev #webDevelopment #webDev

Flip card on hover, flip back on hover out...

... but on touchscreens, flip it on click and then flip it back on second click!

A mostly #CSS solution, using #3D transforms, variables, grid, pointer MQ + a little bit of #JS.

Because somebody asked how to do it https://www.reddit.com/r/css/comments/1jm0a7v/comment/mk7zmd5/

Live demo on @codepen: https://codepen.io/thebabydino/pen/MYWPeer

#cssGrid #cssVariables #JavaScript #css3D #code #coding #frontend #cssLayout #web #dev #webDevelopment #webDev

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

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

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

11! of my demos throughout the first @codepen trending pages!

#SVG #CSS #filter #3D #svgFilter #graphicEffect #textEffects #texture #css3D #transform #code #coding #web #dev #webDev #webDevelopment #frontend

11! of my demos throughout the first @codepen trending pages!

#SVG #CSS #filter #3D #svgFilter #graphicEffect #textEffects #texture #css3D #transform #code #coding #web #dev #webDev #webDevelopment #frontend

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

4⃣ Pure CSS sphere of randomly positioned, non-intersecting spheres https://codepen.io/thebabydino/pen/LYXJPEb

Uses the spherical distribution tactic described here https://mastodon.social/@anatudor/110745736820689528 and then makes sure no two spheres intersect. Also: pure CSS 3D shading!

#CSS #3D #pureCSS #css3d #transform #sphere #maths #geometry #3dGeometry #noJS #shading #code #coding #frontend #web #webDev #dev #webDevelopment

4⃣ Pure CSS sphere of randomly positioned, non-intersecting spheres https://codepen.io/thebabydino/pen/LYXJPEb

Uses the spherical distribution tactic described here https://mastodon.social/@anatudor/110745736820689528 and then makes sure no two spheres intersect. Also: pure CSS 3D shading!

#CSS #3D #pureCSS #css3d #transform #sphere #maths #geometry #3dGeometry #noJS #shading #code #coding #frontend #web #webDev #dev #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

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

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

8⃣ 496 ❤️ Pure #CSS 3D toggle with only input[type=checkbox] + label https://codepen.io/thebabydino/pen/ajpqYW

(awfully hacky, but cool-looking result... which nowadays I'd probably try to get with an SVG filter 🤔)

#3d #toggle #checkbox #css3D #code #coding #frontend #web #webDev #webDevelopment #dev

8⃣ 496 ❤️ Pure #CSS 3D toggle with only input[type=checkbox] + label https://codepen.io/thebabydino/pen/ajpqYW

(awfully hacky, but cool-looking result... which nowadays I'd probably try to get with an SVG filter 🤔)

#3d #toggle #checkbox #css3D #code #coding #frontend #web #webDev #webDevelopment #dev

4⃣ 736 ❤️ 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 #transform #css3D #code #coding #looping #animation #cssAnimation #frontend #web #webDev #dev #webDevelopment

4⃣ 736 ❤️ 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 #transform #css3D #code #coding #looping #animation #cssAnimation #frontend #web #webDev #dev #webDevelopment

This is something I detailed in a #cssTricks article some 8 years ago https://css-tricks.com/things-watch-working-css-3d/ (more exactly, the first point, 3D rendering context)

Nowadays I use #CSS #grid instead of absolute positioning, but the main idea remains: set `transform-style: preserve-3d` on #3D assembly.

#transform #css3d #code #coding #frontend #webDev #wwbDevelopment

This is something I detailed in a #cssTricks article some 8 years ago https://css-tricks.com/things-watch-working-css-3d/ (more exactly, the first point, 3D rendering context)

Nowadays I use #CSS #grid instead of absolute positioning, but the main idea remains: set `transform-style: preserve-3d` on #3D assembly.

#transform #css3d #code #coding #frontend #webDev #wwbDevelopment

My pure #CSS gravity button https://codepen.io/thebabydino/pen/bGzeQrv has become my most hearted Pen of 2023 and my 4th one ever to pass 700 ❤️ - the others are:

✨ #canvas neon hex animation (mysteriously absent from #CodePen search results as well as the popular tab on my profile)
https://codepen.io/thebabydino/pen/zGmdep

✨ Möbius hexahedrons
https://codepen.io/thebabydino/pen/mJojKd

✨ twitter 🩷 animation
https://codepen.io/thebabydino/pen/RRRRZE

#js #JavaScript #3d #css3d #3d #geometry #maths #code #coding #frontend #webDev #webDevelopment #button #cssAnimation

RT Yusuke Nakaya
CSSだけで電車のジオラマを作りました🚋 久しぶりのCSS作品！
OnlyCSS: Low-poly Train
https://codepen.io/YusukeNakaya/pen/PoybbMY
@CodePen
#css #css3d #cssart #webdevelopment https://t.co/t2wcGEGUif

:sys_twitter: https://twitter.com/s14garnet/status/1651949705893675009