How to transition only rotate transformation?

css rotation transition
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;

Related questions

CSS3 transition on click using pure CSS

I'm trying to get an image (a plus symbol) to rotate 45 degrees to create a cross symbol. I have so far managed to achieve this using the code below but its working on hover, I wanted to have it rotate …

Read More
CSS3 Rotate Animation

<img class="image" src="" alt="" width="120" height="120"> Cannot get this animated image to work, it is supposed to do a 360 degrees rotation. I guess something's wrong with the CSS below, as it just stays still. .image { float: left; …

Read More
CSS rotation cross browser with jquery.animate()

I'm working on creating a cross-browser compatible rotation (ie9+) and I have the following code in a jsfiddle $(document).ready(function () { DoRotate(30); AnimateRotate(30); }); function DoRotate(d) { $("#MyDiv1").css({ '-moz-transform':'rotate('+d+'deg)', '-webkit-transform':'rotate('+d+'deg)', …

Read More