CSS card parallax with pointermove + custom props 🧑‍🍳 <div class=ring style="--i: 2"> .ring { translate: calc(var(--px) * (var(--i) * -2rem)) calc(var(--py) * (var(--i) * 2rem)); } trick: pointer mapping to rotate card in 3D + translate rings 2D for the illusion 🤙 check it 👇

Just needed to wait for the legend to catch in this . You’re cooking!

i was baited in with the tags haha 😅

man you're crazy. it looks better than the prototype

too kind Fede 🤙 fun one to build!

That's crazy

i’m convinced you are literally a wizard

love it!

thank you sir! 🙏

Css god 🙏🏻

wait what how.... Are you thinking in algebra?

Hell yeah

lovely design Seb, couldn't resist 🤙 saw some people asking for CSS versions, got tagged, threw it together quick before bed 😅

Always love your stuff Jhey - feel free to build literally anything I make. Maybe we can collab on something dope in the future.

thanks Seb, appreciate that 🙏 these card designs are really neat that would be awesome 🤙 (love things like this design because you can bring them to life with not too much code, it's like this one 👇)

Thats rad

👒 up...

🐐

dope.

You are literally a wizard

@ved_aida tryin' 🫡

So creative, looks really good

jus' tappin' into some tricks i've been sharing, it was good timing 😅

How do you populate px? Js?

that's from pointermove/deviceorientation and maps from -1 to 1 on both axis (shown in video kinda) that then gets passed into CSS so it can do what it wants with the value 🤙

Are you the God of CSS? 😭😭

@Ellydev0 haha – never!

like this?

Hats Off! Buddy @SebCornelius and @jh3yy

Wow bro it’s really good ,come on I want to know how to get it

so wish that wed get preserved 3d even when the overflow is clipping the contents.. but these illusion hacks are cool enough <3 great job as always, Jhey!

jhey blazzing fast 😭

Cool

Crazy🤯

🔥🔥🔥

Crazy stunting!

It looks stunning bro!!!

Just experimented with getting the perspective right, no hacks, actually proper, configurable perspective <3 ill make prettier looking demo and share it when it's done 🤍 (not a single line of js btw)

Brilliant

That's a very interesting one