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?
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.
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.