jQuery旋轉圖像不在中心

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();