Lmst
Login

#CssTransform

Ana Tudor 🐯anatudor
2025-06-25

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

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

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

Musical toy with wooden and metallic stars (and a wooden moon) hanging on strings from the top and rotating around a central axis.
Ana Tudor 🐯anatudor
2025-06-18

A little something on @codepen: pure icosphere of spheres codepen.io/thebabydino/pen/poY

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

Ana Tudor 🐯anatudor
2025-05-28

Pure chamfering sequence on @codepen: tetrahedron β†’ chamfered tetrahedron β†’ cube and back codepen.io/thebabydino/pen/MWV

Ana Tudor 🐯anatudor
2025-05-24

7️⃣ 749 ❀️ Pure MΓΆbius 6hedrons codepen.io/thebabydino/pen/mJo

The how behind I live coded it in 30 minutes css-tricks.com/how-i-live-code

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

Ana Tudor 🐯anatudor
2025-05-20

Here's a little image gallery demo I made on @codepen
codepen.io/thebabydino/pen/LEY

Almost pure . Minimal for changing the index of the current image on click.

For the how ensuring the rotated side images have a given 2D projection on the screen, see stackoverflow.com/a/75063640/1

Ana Tudor 🐯anatudor
2025-05-20

3️⃣ 1044 β™₯️ Pure gravity button codepen.io/thebabydino/pen/bGz - 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.
Β―\_(ツ)_/Β―

Screenshot of the gravity button. Shows round particles appearing and getting pulled towards the button. As they approach, they accelerate and get stretched before smashing into the button and causing sparks.August 2024 post showing how I found this demo on a website, wrapped in AI-generated crap that claims to explain what's going on. Except it gets it very wrong. And they don't indicate in any way that someone else (me!) made it.My post about finding my demo on in a video on the Indiamoon YouTube channel. The video is 90 seconds of auto-typing code and also doesn't credit me.
Ana Tudor 🐯anatudor
2025-05-13

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

1️⃣ 1092 β™₯️ infinite gallery codepen.io/thebabydino/pen/XJr - 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)

Ana Tudor 🐯anatudor
2025-05-10

Someone just hearted this demo I made on @codepen back in 2018 and I noticed it still said it only works in Blink browsers.
codepen.io/thebabydino/pen/BPx

Not anymore! As of the summer of '24, Firefox also supports registering & animating custom properties! So this is now cross-browser! πŸŽ‰πŸ₯³

Ana Tudor 🐯anatudor
2025-04-28

Here's a super simple pure hover effect on @codepen codepen.io/thebabydino/pen/ZYY

*Heavily* commented, every coding choice explained.

Ana Tudor 🐯anatudor
2025-04-25

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

codepen.io/thebabydino/pen/zqG

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.

Screenshot of Chrome problem.
Ana Tudor 🐯anatudor
2025-04-15

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 reddit.com/r/css/comments/1jyu

Live on @codepen codepen.io/thebabydino/pen/dPP

Also uses container queries, CSS trigonometric functions.

Ana Tudor 🐯anatudor
2025-04-07

Fun Safari bug πŸͺ²: `drop-shadow()` does't take transforms into account bugs.webkit.org/show_bug.cgi?i πŸ‘€

Ana Tudor 🐯anatudor
2025-03-19

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

codepen.io/thebabydino/pen/NNx

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.

Ana Tudor 🐯anatudor
2025-03-19

Another little @codepen demo: pure double ball 🎱 helix codepen.io/thebabydino/pen/Jre

(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()`)

Ana Tudor 🐯anatudor
2025-03-19

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. 😻

mastodon.social/@anatudor/1107

/* THEN 🫀 */ div { position: absolute } .assembly { top: 50%; left: 50% } .cube__face { margin: -.5*$l } /* NOW 😻 */ div { display: grid } .assembly { place-self: center }
Ana Tudor 🐯anatudor
2025-03-19

Someone hearted this old thing codepen.io/thebabydino/pen/GNY 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 variables, grid, newer functions and could be much simplified using these.

Ana Tudor 🐯anatudor
2025-03-17

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 codepen.io/thebabydino/pen/bGP

Screenshot advising to duplicate content, use two separate animations for each content copy and animate left in order to create a marquee infinitely moving a bunch of non-clickable icons.Screenshot of the linked demo.
Ana Tudor 🐯anatudor
2025-03-11

Quick carousel on @codepen codepen.io/thebabydino/pen/eYX

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

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

Ana Tudor 🐯anatudor
2025-03-04

Because someone just hearted this demo on @codepen
codepen.io/thebabydino/pen/wvy

This was one of the very first demos I made using 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.

Inautiloinautilo
2025-01-18


CSS lessons for your parking fails Β· Proper car positioning may be easier than you think ilo.im/161t84

_____

Client Info

Server: https://mastodon.social
Version: 2025.04
Repository: https://github.com/cyevgeniy/lmst