How to transition only rotate transformation?

Digger picture Digger · Jul 10, 2013 · Viewed 30.6k times · Source

I'm using a bunch of elements to compose a background image and they all absolutely position around, rotating freely.

Problem is, I would like to transition only the rotation of those objects, not the top nor left properties. And apparently transition: transform 30s; isn't allowed. I had the brilliant idea of doing

transition:all 30s ease-out;
transition: left 0s;
transition: top 0s;

But that also doesn't work. How can I solve this?

Answer

Conqueror picture Conqueror · Sep 9, 2013

Transform is a vendor prefix

Instead of

transition:all 30s ease-out;
transition: left 0s;
transition: top 0s;

do

-webkit-transition: -webkit-transform $amount-of-time ease-out;
-moz-transition:    -moz-transform $amount-of-time ease-out;
-o-transition:      -o-transform $amount-of-time ease-out;
-ms-transition:     -ms-transform $amount-of-time ease-out;
transition:         transform $amount-of-time ease-out;