Animate element transform rotate

jquery transform
kalpaitch picture kalpaitch · Mar 28, 2011 · Viewed 197.9k times · Source

How would I rotate an element with a jQuery's .animate()? I'm using the line below, which is currently animating the opacity correctly, but does this support CSS3 transforms?

$(element).animate({
   opacity: 0.25,
   MozTransform: 'rotate(-' + -amount + 'deg)',
   transform: 'rotate(' + -amount + 'deg)'
});

Answer

Ryley picture Ryley · Mar 28, 2011

As far as I know, basic animates can't animate non-numeric CSS properties.

I believe you could get this done using a step function and the appropriate css3 transform for the users browser. CSS3 transform is a bit tricky to cover all your browsers in (IE6 you need to use the Matrix filter, for instance).

EDIT: here's an example that works in webkit browsers (Chrome, Safari): http://jsfiddle.net/ryleyb/ERRmd/

If you wanted to support IE9 only, you could use transform instead of -webkit-transform, or -moz-transform would support FireFox.

The trick used is to animate a CSS property we don't care about (text-indent) and then use its value in a step function to do the rotation:

$('#foo').animate(
..
step: function(now,fx) {
  $(this).css('-webkit-transform','rotate('+now+'deg)'); 
}
...

Related questions

jQuery rotate/transform

I'd like to use this function to rotate then stop at a particular point or degree. Right now the element just rotates without stopping. Here's the code: <script type="text/javascript"> $(function() { var $elie = $("#bkgimg"); rotate(0); function rotate(…

Read More
jQuery click events not working in iOS

Second update: Looks like one of my functions (resetFigures) was preventing the event handler, so moving that to the end of the bind function sorted it out. Update: I realized after some basic testing that the click events were registering, …

Read More
Get element -moz-transform:rotate value in jQuery

I have CSS style for a layer: .element { -webkit-transform: rotate(7.5deg); -moz-transform: rotate(7.5deg); -ms-transform: rotate(7.5deg); -o-transform: rotate(7.5deg); transform: rotate(7.5deg); } Is there a way to get curent rotation value through jQuery? I tried this $('.element').css("…

Read More