CODEWITHSUNDEEP
jqueryanimationrotation
danyo
danyo

Reputation: 5856

jquery animate transform:rotate

I have the following image which i am trying to animate the rotation:

enter image description here

My css currently for the image is this (the image has a class of "p5easy":

.p5easy{ 
   transform:rotate(-90deg);
   -ms-transform:rotate(-90deg); /* IE 9 */
   -webkit-transform:rotate(-90deg); /* Safari and Chrome */
}

I am then using jQuery to try and animate the image. I am doing the following:

$('.p5easy').delay(0).show().animate({'-webkit-transform':'rotate(0deg)'},{duration: 1000});

Im not quite sure but this doesnt work. Am i approaching this in the right way? Does jQuery animate support rotation, or do i need another plugin for this?

Here is a fiddle http://jsfiddle.net/jvpEN/

Upvotes: 0

Views: 7199

Answers (2)

poli_g
poli_g

Reputation: 639

I'm probably a bit (a year) late, but you can try one of these: http://www.jqueryrain.com/2012/08/jquery-flip-effect-plugin-examples/

Upvotes: 0

Anna Gabrielyan
Anna Gabrielyan

Reputation: 2170

try this 

$('.p5easy').animate({  textIndent: 0 }, {
    step: function(now,fx) {
      $(this).css('-webkit-transform','rotate('+now+'deg)'); 
    },
    duration:'slow'
},'linear');

Upvotes: 1

Related Questions