Pure #CSS #3D chamfering sequence on @codepen: tetrahedron → chamfered tetrahedron → cube and back https://codepen.io/thebabydino/pen/MWVJVKE
GIF
Recent searches
Search options
Administered by:
#csstransforms
0 posts0 participants0 posts today
Replied in thread
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.
GIF
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
GIF
Replied in thread
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.
¯\_(ツ)_/¯
I turn 13 on @codepen in June, so here are my 13 most hearted demos:
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)
GIF
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! 
GIF
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.
GIF
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
GIF
A little pure #CSS 
#animation I made on @codepen a few years ago https://codepen.io/thebabydino/pen/bGwYVOm
GIF
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...
GIF