I’m setting up a rotation on hover, similar to this webflow tutorial.
The issue is that the interaction’s center is off. The resting state at 50% 50% makes the image look tilted when it should be flat. If I make “30%, 30%” the resting state, it looks normal again; Nonetheless, when I hover over the element it still feels like the interaction’s center is off. If you try it, you’ll notice the left side is far more sensitive than the right side, despite the interaction being symmetrically balanced.
I’ve gone over the elements and interaction and couldn’t find what’s causing this. Any tips on what might be causing this?
The project’s Read-only Link is below. Thank you.
PS: Site is a work-in-progress!
Note: The main difference with the linked tutorial is that the trigger area is an div. hovering over it It targets and tilts a div inside it. This set up is so that I can later replicate this across several items using the trigger’s class to affect “only children of that class” on hover.
Here is my public share link: LINK
It’s the first card under the pink Servicios section at the beginning of the page.