CODEWITHSUNDEEP
csstransformtransition
esdot
esdot

Reputation: 578

Apply CSS3 Transition To Some Transforms (translate3d) but Not Others (rotate)

I'd like to define a class whose CSS3 transition is only applied to the translate3d transform, and not any other transform (rotate, translate, etc). Is this possible? If so, what's the syntax? Something like this:

.animatedMarker {
    transition: transform:translate3d 1s linear; 
    /* transition is only applied to translate3d transformation, so rotate, translate, etc. won't be animated */
}

Upvotes: 3

Views: 7021

Answers (1)

Mircea
Mircea

Reputation: 11593

You can not transition only translate3d, however you can keep the rest unaltered:

transform: translate3d(0, 0, 0) skew(45deg) rotate(23deg);

and on hover

transform: translate3d(100px, 0, 0) skew(45deg) rotate(23deg);

http://jsfiddle.net/yeuxQ/1/

Upvotes: 3

Related Questions