Need 3D-Transform help!

Can any pro 3D transformers please help me out with getting this perspective right? I cant seem to get the right perspective on a slider over an image of a phone. Here’s the link to the site: https://preview.webflow.com/preview/trip2alt?preview=f2089624cb

I’ve spent the last two days messing around with the values. I get super close, start making small changes, then I just get lost.

Let me know if this can be done.


Here is my public share link: LINK
(how to access public share link)

Hi, @cgxix!
Your read-only link doesn’t work. Could you re-create it, please?

Regards,
Anna

Here’s how to correctly make a read only link. :wink:

That’s what I did. Here’s a new link - though I think I got it pretty close (after 5 hours -_-)

https://preview.webflow.com/preview/trip2alt?preview=fffea96572308f0d707629c3a9e1de73

Ok, now read-only link is working.

“Trick” with 3D transforms is that you have to set perspective on the parent of the elements, that you are transforming.
But seems you came pretty close to desirable look without 3D.

Also, it would be much easier to use “flat view” of iPhone and then transform it in 3D dimentions

Cheers,
Anna

2 Likes

Ah I see, I found some origin perspective slider in the little gear icon and that got me pretty close. I guess I need to read up a little more on transforms - cool stuff though! Thanks for the help!

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.