Streaming live at 10am (PST)

Perspective doesn't work when I add interaction to the element


#1

Hi everyone,

I add 3D perspective and transforms to an element and it’s working beautifully, but as soon as I add interactions to the same element, it’s no longer showing the perpective in preview or published site, only in webflow designer! Would anyone know how I can have both 3D transforms AND interaction on an element?

Thank you!!


#2

Here’s the share link by the way: https://preview.webflow.com/preview/zurnacreative?preview=a38d43ce022921153aa2bbc16d27201c

On the end of the page called “conrogo”.

Thanks!


#3

Hi,

the issue is in your “Initial appearance”. Go there and just put the opacity at 100%, you’ll see that by just moving the object down, you’ve also reset it’s 3D transform.

So in the Initial state, you’ve got to reproduce and re-declare the 3D transform you’ve styled before, I guess (which doesn’t seem super natural to me either, I thought it would work the way you thought it would).

Anyway, do you see what I mean? Make sure your initial state gets the 3D transform.

If you only want this 3D transform element to move up and down, you should wrap it into a DIV and apply the interaction to that div, this way the 3D transform of the element won’t be affected.

Hope that helps!


#4

Thank you so much @vincent ! I wrapped them into a div and it worked. You are the best!


#5

You can use this technique everytime you’re using an interaction. I almost exclusively attach interactions to a div that has no property at all. I only give this div a class to name it. So when I want to make an interaction on an object I have 2 possibilities : either I wrap the element inside a div and put the interaction on that div, either I use a div as a trigger, that I place wherever I want, and tell the interaction to affect another element.


#6

Great tip @vincent , thank you again!!


#7

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