Rotating a div around a point

Question

I want to animate the rotation of a div around a specific point. I am trying to use a method animate()in jQuery to make this work.

I tried animating with {rotate: "+=9deg"}, but it does not work. Also tried to use MozTransform..., and it did not work.

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

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

Answer 1

Found a plugin that does just that:

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

, animate()!

Answer 2

CSS, , . , .

.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 */
}

45 . IE6/7/8 filter -ms-filter .

filter . , transform , MS . , , , IE, , . , , .

, IE6/7 filter CSS ( ). -ms-filter IE8 , , IE6/7. CSS Firefox (, , ) , . (, , , IE) .

Answer 3

, transform-origin. , .

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

Answer 4

rotateis not a CSS property, so .animate()it won’t work with it. ( .animate()only gradually changes the specified CSS properties from one value to another.)