Currently facing a challenge. I am manipulating an element by dragging it across the screen. When changing directions (left or right), I tilt the element in the direction it is moving, creating a gravity-like effect.
To achieve smooth tilting, I have added the following CSS:
transition: all linear 50ms;
Then, I adjust the transform property to rotate the element left or right using this code:
transform: rotate(3deg) translateX(<x under mouse>px) translateY(<y under mouse>px);
The issue arises when I only want the rotation to transition smoothly, while the translation through X and Y axes appears choppy due to the overall transition effect.
Is there a way to apply a transition specifically to one part of the transform property without affecting the others? Alternatively, should I consider setting X/Y positions using the top and left properties?