Lmst
Login

#cssTransforms

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

Haven't had it in me to do anything for the past week's , so here's a demo from earlier this year that fits: infinite scroll gallery codepen.io/thebabydino/pen/XJr

One of my most hearted demos ever & my only one to get over 1000 ❀️ without being in the most hearted of previous year.

Ana Tudor 🐯anatudor
2025-01-17

I made a thing: scroll-driven, almost pure infinite circular gallery rotation - check it out on @codepen
codepen.io/thebabydino/pen/XJr

Using scroll-driven animations and the tiniest bit of JS for the infinity part of it.

Made with πŸ–€ for this week's .

cc @bramus

Ana Tudor 🐯anatudor
2024-12-25

A little pure πŸŒŸπŸŽ„ I made on @codepen a few years ago codepen.io/thebabydino/pen/bGw

Ana Tudor 🐯anatudor
2024-11-26

Because I came across a question on reddit reddit.com/r/css/comments/1h05

One common gotcha with 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.


Ana Tudor 🐯anatudor
2024-10-25

Another super old @codepen demo I redid with modern is this yummy menu codepen.io/thebabydino/pen/Aox

CSS grid instead of absolute positioning, clip-path instead of nested skew and un-skew, CSS variables to avoid setting a separate transform chain on each item... and more!

Ana Tudor 🐯anatudor
2024-09-27

Another request, mastodon 🦣

If you can test in Safari, can you let me know what the second (moving) line looks like for you?

codepen.io/thebabydino/pen/Jjg

Cyan like expected/ Chrome/ Firefox? Lime like what I'm seeing with Epiphany?

Boosts appreciated if you cannot test. Thanks! πŸ™

Screenshot. Shows two lines of text, top one is stationary, bottom one is translated back and forth. The fixed one is always cyan, the moving one should be cyan too, but is lime in Epiphany.
Ana Tudor 🐯anatudor
2024-09-27

Because I saw someone hearted codepen.io/thebabydino/pen/zKL I got reminded of something I need for animations like this one: to be able to use vars to compute keyframe percentages.

I have 16 columns, each with a different animation. They're different because the keyframes needs to be different depending on the index.

Ana Tudor 🐯anatudor
2024-09-04

I've just seen a bunch of my demos "trending" on @codepen.

✨ stroke shadow wave 🌊
✨ no matrix gooey effect
✨ slice πŸ—‘οΈ
✨ here is real magic 🧞
✨ slice & offset πŸ”ͺ
✨ dizzy 3D πŸ₯΄
✨ blended layers
✨ split text effect
✨ realistic grainy shadows

...just on the first 5 pages! 🀯

First "trending" page on CodePen with my "No text duplication stroke shadow 🌊" and my "No matrix filter gooey effect" demos. A bit of the second "trending" page can be seen and my "Slice!" demo is there too.Second "trending" page on CodePen with my "Slice! No JS, no text duplication! (contenteditable)" and my "Here is real magic - no text duplication or splitting" demos. A bit of the third "trending" page can be seen and my "Disconnect - no text duplication slice & offset" demo is there too.Third "trending" page on CodePen with my "Disconnect - no text duplication slice & offset" and my "Dizzy - pure CSS 3D" demos. A bit of the fourth "trending" page can be seen and my "I don't wanna grow up - no text duplication blended layers" demo is there too.Fifth "trending" page on CodePen with my "Realistic grainy shadows with no image duplication" demo. A bit of the fourth "trending" page can be seen and my "Dreams - pure CSS text effect" demo is there too.
Ana Tudor 🐯anatudor
2024-09-04

Because someone hearted this again: a demo I did over a decade ago on @codepen - a pure poster getting rolled and unrolled again.

codepen.io/thebabydino/pen/AVr

Ana Tudor 🐯anatudor
2024-08-14

Bonus:

1⃣3⃣ Pure winter scene codepen.io/thebabydino/pen/vpy

(actual demo looking better than the choppy gif)

Screenshot of winter scene containing a 3D tree being snowed on as it rotates.
Ana Tudor 🐯anatudor
2024-07-12

A little pure 3D demo I made on @codepen last year: torus knot out of neon tiles codepen.io/thebabydino/pen/poq

I saw this @beesandbombs .gif x.com/beesandbombs/status/1497 and got the idea I could CSS something like it, but then I never got to posting it publicly...

Ana Tudor 🐯anatudor
2024-05-28

1⃣2⃣ 442 ❀️ Pure 3D cube assembly codepen.io/thebabydino/pen/GNY

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.

Ana Tudor 🐯anatudor
2023-03-10

But now, we can compute the scaling factor as the cosine of the skew angle, animate the skew angle* and the scaling factor changes accordingly πŸ₯³πŸŽ‰

*@​property support needed

@property --sxa { /* skew angle */ syntax: '<angle>'; initial-value: -90deg; inherits: true } .square { --sxa: -90deg; --syf: cos(var(--sxa)); /* scale factor */ transform: skewX(var(--sxa)) scaley(var(--syf)); animation: sxa 2s ease-in-out infinite } @keyframes sxa { to { --sxa: 90deg } }
SELFHTML e.V.selfhtml@bildung.social
2022-11-28

#css #csstransforms #svg Neufassung unseres mehrteiligen Tutorials: wiki.selfhtml.org/wiki/Transfo
Feedback erbeten!

Client Info

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