Question

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

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

然而，使用上面的例子，我想围绕字母G旋转图像，这怎么可能实现呢？

当前代码：

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

齿轮杆是我的图像的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在上面的帖子中提出）文档说明添加了“center”属性，如下所示。它需要一个长度为2的绝对像素位置或百分比数组。即center: ["150px", "100px"]或center: ["60%", "50%"]

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

rotation();

jQuery旋转图像不在中心

4 个答案: