jQuery旋轉圖像不在中心

我在嘗試旋轉特定點上的圖像時遇到了一些問題。jQuery旋轉圖像不在中心

我一直在使用http://jsfiddle.net/YKj5D/作爲例子;當想要從中心點旋轉圖像時，它完美地工作。

但是，使用上面的例子，我想旋轉字母G周圍的圖像，這怎麼可能實現？

當前代碼：

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

當齒輪棒是我的形象的ID。

我正在嘗試創建一個轉計數器撥號。

來源

2013-05-03 Oam Psy

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

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

來源

2013-05-03 07:54:15

謝謝。沒想到這麼簡單的修復！你能否解釋一下上面提到的CSS是如何實現這個的？如果說我想旋轉字母E，它會有所不同嗎？ – 2013-05-03 08:03:04

padding-right：170px; – 2013-05-03 08:16:52

@OamPsy好吧，這個技巧應該很容易被發現，管理'padding'我們實際上增加/減少了一些「不可見」的元素區域，這會使元素變寬，這樣我們就可以轉換旋轉中心。一個問題可能是使用背景顏色，比我建議使用'transform-origin' – 2013-05-03 12:37:30

我覺得這是一個很多清潔修復。

#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 
}

只要將原點值更改爲任何適合您需要的值，它將圍繞該原點旋轉。

來源

2013-05-03 08:34:14

最近版本的jQueryRotate處理不斷變化的旋轉中心交叉瀏覽。使用僅填充的解決方案不適用於CANVAS/VML的回退。請檢查http://jqueryrotate.googlecode.com

來源

2013-07-31 14:29:55 Wilq32

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

來源

2014-02-14 10:57:29 Agnit

jQuery旋轉圖像不在中心

回答

相關問題