如何在旋转图像时保持其原始位置

Question

我在HTML文档中有一张图片：

<img id="img1" src="C:\Html\img1.jpg" alt="my-image" width="150" height="150" Style="position:relative;left:600;top:45;"`>

我希望在按钮点击时可以使这张图片旋转，我已经能够实现这个功能，但是图片会从它的位置移动到默认位置。

function Test() {
    var angle = 0;
    setInterval(function(){
        angle+=3;
        $("#img1").rotate(angle);
    }, 50);
}

我希望图片能够在它最初加载的位置上。

- rikky

Answer 1

您可以在使用该插件时传递一个“center”。

$("#img1").rotate({angle: angle, center: ["50%", "50%"]});

文档里已经有了这个信息。

- Pointy

---

Center用于更改图像中心，我将50％更改为5％，我发现图像的中心已更改，从该中心旋转。我的要求是移动图像的位置，而不是图像中心。 - rikky

“center”选项用于更改旋转中心。我不知道你所说的“移动图像位置但不移动图像中心”的意思。 - Pointy

Answer 2

这里不使用jQuery rotate，但是在我的版本中可以设置transform-origin属性：

$('#img1').click(function () {
    'use strict';

    var $this = $(this),
        angle = 0,
        v;

    setInterval(function () {
        angle += 3;
        v = "rotate(" + angle + "deg)"

        $this.css({
            '-webkit-transform': v,
            '-moz-transform': v,
            '-ms-transform': v,
            transform: v
        });
    }, 50);
});

当然，您不必将目标定为this，在您的情况下，您将使用#img1，事件处理程序将在button上。

请参见jsFiddle。

- rink.attendant.6