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旋转图像不在中心

回答

相关问题