jQuery旋转图像不在中心
问题描述:
我在尝试旋转特定点上的图像时遇到了一些问题。jQuery旋转图像不在中心
我一直在使用http://jsfiddle.net/YKj5D/作为例子;当想要从中心点旋转图像时,它完美地工作。
但是,使用上面的例子,我想旋转字母G周围的图像,这怎么可能实现?
当前代码:
function rotateGearStick()
{
var rotation = function(){
$("#gear-stick").rotate({
angle:0,
animateTo:110,
});
}
rotation();
}
当齿轮棒是我的形象的ID。
我正在尝试创建一个转计数器拨号。
答
我觉得这是一个很多清洁修复。
#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
}
只要将原点值更改为任何适合您需要的值,它将围绕该原点旋转。
答
最近版本的jQueryRotate处理不断变化的旋转中心交叉浏览。使用仅填充的解决方案不适用于CANVAS/VML的回退。请检查http://jqueryrotate.googlecode.com
答
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();
谢谢。没想到这么简单的修复!你能否解释一下上面提到的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