Is it really 3d in webflow?

hi what up, hope your are doing good all.

check out this:
https://www.instagram.com/p/COODLFTiZOq/

it was made i spline, a tool i can generally recommend for everybody that want to play around with 3d without having to learn complex 3d software.

but i tried to rebuild this effect in webflow without any third party software because i thought that the build in 3d-function in webflow would be able to do this. but i didnt succeeded.

i tried out different z-positions and 3d transform with self perspective etc…it didnt worked that the elemtn appear REALLY on different depths…

isnt it possible within webflow?! what do you think?


Here is my public share link:
https://preview.webflow.com/preview/shoshin?utm_medium=preview_link&utm_source=designer&utm_content=shoshin&preview=c49952a14abfc0ec7a37ee4d7b147e8b&pageId=606b2e01c015314410cdd854&workflow=preview

1 Like

hm nobody any idea on how to do this? i mean it looks pretty cool doesnt it? :smiley:

1 Like

Howdy @danyalxy it’s really cool to see the effect which you’re working on achieving here! It’s definitely possible to build something like that in Webflow.

Here’s a guide to using transforms and working in 3D in Webflow ➞
Here’s a quick video on 3D movement and animation in Webflow ➞

One important note is that you’ll want to add perspective to get 3D motion within that space (a low value for perspective makes it fairly warped, whereas a higher value typically results in a more realistic 3D experience).

Shared with CloudApp

Moving elements around on the Z-Axis within the animation will allow you to get a depth effect.

Here’s an older video walking through a more 3D build in Webflow.

I have a few examples of 3D builds on my profile and you can feel free to clone this one as well.

1 Like

howdy! thanks for your reply bro!

yes i am getting that i need to put perspective on the parent element (children perspective) but what then?

i tried then to go into my interaction (mouser hover) and put different rotation interactions on the children elements…no success…there is something wrong in my logic haha…

https://preview.webflow.com/preview/shoshin?utm_medium=preview_link&utm_source=designer&utm_content=shoshin&preview=c49952a14abfc0ec7a37ee4d7b147e8b&pageId=606b2e01c015314410cdd854&workflow=preview

there is no depth as you can see here:
https://shoshin.webflow.io/experimenting

Howdy @danyalxy thank you so much for following up!

I’ve made another quick video walking through how the overflow: hidden style was removing the 3D field in the interaction:

3 Likes

bro your are king!
you just recorder a video for a random guy in the forum to solve his 3d problem haha…this is awesome! really appreciate it!

and so happy so this effect working now!
so now i can continue to work on this project and i am excited!

1 Like