Advanced 3D Rotation Effect
hey guys!
I'm working on a project where the client would like a similar effect to this: https://cydstumpel.nl/
The cards spinning around an object .
The object in the background is a 3D experience (I'm not really interested in that)
What has me stumped is the 3D rotating effect that happens when you scroll.
That's all done in html, css and javascript but I can't figure out how.
Initially, I thought all the cards were in a contain with children perspective, then each card is given it's own transform properties to make it look like it's in a cylinder type shape. Then the final step would be rotating the parent object.
On the Cyd Stumpel site, it looks like each image is being transformed individually and I'm curious how or if it's a JavaScript library
Any advice would be appreciated. Thanks!
cyd
Portfolio Cyd Stumpel
Portfolio Cyd Stumpel – Creative Freelance Developer from Amsterdam
Cyd Stumpel is a Freelance Creative Developer from Amsterdam, she's worked for several agencies and brands like WeTransfer, Amnesty International & Oedipus
3 Replies
Hey @Kudz I don't have time to dive deep into this one but I do remember seeing that Matias redid it in webflow interactions. Might be able to learn from his build
https://webflow.com/made-in-webflow/website/090-100dwfix
#90 3D Spiral Portfolio
#90 3D Spiral Portfolio - Webflow
3D Spiral Portfolio
No #webgl, no third party libraries, no custom code. As usual, 100% #webflow native. Inspired by @cydstumpel
090 - 100 days of @webflow interactions
Woah this is a cool site!
Hi @Web Bae
Thanks for the tip!
Sorry for the late response, the last weeks have just been packed🙏