Rotating a div about a point

Question

I want to animate rotating a div about a particular point. I've been trying the animate() method in jQuery to get this to work.

I've tried animating with {rotate: "+=9deg"} but it doesn't work. Also tried using MozTransform... and it didn't work.

However, something like this does work: {'-moz-transform': 'rotate('+degrees+'deg)'}

Is there something I'm doing wrong with the simpler, more intuitive ways? Or is it a bug in jquery? Or is it an absurd way and I should do it the "hardway"?

possible duplicate of [Rotating a Div Element in jQuery](http://stackoverflow.com/questions/382591/rotating-a-div-element-in-jquery) — Matt Ball, Dec 16 '10 at 17:25

score 3 · Answer 1 · answered Dec 17 '10 at 13:49

Here is the full CSS stylesheet you need to get all current browsers to rotate an element. I've commented the styles with the relevant browsers that they affect.

.myclass {
  -ms-transform: rotate(45deg);   /* IE9 ? */
  -moz-transform: rotate(45deg);  /* FF3.5+ */
  -o-transform: rotate(45deg);  /* Opera 10.5 */
  -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
  transform: rotate(45deg);  /* CSS3 (for when it gets supported) */
  filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
}

This example rotates an element by 45 degrees. The IE6/7/8 filter and -ms-filter styles use radians instead of degrees.

The other big difference between the filter styles and the others is the origin point of the rotation. If I recall correctly, the transform styles rotate around the center while the MS styles rotate around the top left corner. I believe this can be adjusted, but we solved this issue just by having an IE-only style that shifted the absolute position of the element so it ended up in the same place. Obviously this won't help you when it comes to an animation though.

The final thing to point out is that the IE6/7 filter style is actually invalid CSS (because it contains colons and other reserved characters). The -ms-filter variant for IE8 is okay because it is in quotes, but this isn't allowed in the IE6/7 version. This problem actually breaks CSS parsing in Firefox (and possibly other browsers), to the point that any subsequent styles will not be read. For this reason, I recommend that you include it (or at least the IE-specific parts) in its own stylesheet.

Great explanation! But I was looking for info about animating a div by rotating it about a point. — Utkarsh Sinha, Dec 17 '10 at 14:10

score 2 · Accepted Answer · answered Dec 17 '10 at 13:31

2

Found a plugin that does exactly this:

https://github.com/heygrady/transform/wiki/

It lets you animate transforms using the standard animate() function!

answered Dec 17 '10 at 13:31

Utkarsh Sinha

3,295
4
30
46

score 2 · Answer 3 · answered May 18 '11 at 15:52

To rotate about a point, use the transform-origin property. For instance, the following will set rotation around bottom-left point.

{
    transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -webkit-transform-origin':'0% 100%;
    -o-transform-origin:0% 100%;
    -ms-transform-origin': 0% 100%
}

score 1 · Answer 4 · answered Dec 16 '10 at 17:29

1

rotate isn't a CSS property, so .animate() will not work with it. (.animate() just gradually changes specified CSS properties from one value to another.)

answered Dec 16 '10 at 17:29

Domenic

110,262
41
219
271

Rotating a div about a point

4 Answers4