javascript - jQuery旋转图像不在中心

Question

我在尝试在特定点上旋转图像时遇到了一些问题。

我一直以http://jsfiddle.net/YKj5D/为例；当想要从其中心点旋转图像时，它可以完美地工作。

但是，使用上面的示例，我想围绕字母 G 旋转图像，如何实现？

当前代码：

function rotateGearStick()
{
var rotation = function (){
       $("#gear-stick").rotate({
          angle:0, 
          animateTo:110, 
       });
    }
    rotation();
}

其中 gear-stick 是我的图像的 ID。

我正在尝试创建一个转速计刻度盘。

Answer 1

http://jsfiddle.net/YKj5D/1988/

#image{
    margin:100px;
    padding-left:170px; /* <----- */
}

Answer 2

我发现这更清洁。

#image{
    -webkit-transform-origin:0px 0px;
    -moz-transform-origin:0px 0px;
    -ms-transform-origin:0px 0px;
    transform-origin:0px 0px; //px or percent whichever you prefer
}

只需将原点值更改为适合您需要的值，它将围绕该原点旋转。

Answer 3

最新版本的 jQueryRotate 处理跨浏览器旋转中心的变化。使用仅填充解决方案不适用于 CANVAS/VML 的后备方案。请检查http://jqueryrotate.googlecode.com

Answer 4

http://jqueryrotate.googlecode.com （由 Wilq32 在上面的帖子中建议）文档说添加“中心”属性，如下所示。它需要一个长度为 2 的绝对像素位置或百分比的数组。即center: ["150px", "100px"]或center: ["60%", "50%"]

var rotation = function (){
  $("#image").rotate({
      angle:0, 
      animateTo:360, 
      center: ["150px", "100px"], 
      callback: rotation
  });
}

rotation();