CODEWITHSUNDEEP
htmlcss
frosty
frosty

Reputation: 21762

CSS Transition: one transform property, not the other

I am running into an issue right now. I have an element that I drag around the screen. When I switch directions (left or right), I tilt it the direction it is heading (giving it a feeling of gravity happening to it.

In order to make the tilting smooth, I apply the following css to it:

transition: all linear 50ms;

And then, I just switch the transform property to rotate it left or right, using the following:

transform: rotate(3deg) translateX(<x under mouse>px) translateY(<y under mouse>px);

The problem is that I want to have the transition on the rotate, but not on the translateX or translateY. It is making the translateX/translateY look choppy.

Is it possible to have a transition for one part of the transform property, but not the other? Or should I set the X/Y using the top and left properties?

Upvotes: 4

Views: 842

Answers (1)

Rudolph Gottesheim
Rudolph Gottesheim

Reputation: 1701

Not an ideal solution (from a purist's point of view), but have you considered wrapping the element inside another and just applying the transform to that one?

Upvotes: 4

Related Questions