javascript - 回転中に画像を元の場所に保持する方法

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

画像を最初にロードした場所に配置したい。

Answer 1

そのプラグインを使用するときに「センター」を渡すことができます。

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

それはドキュメントにあります。

Answer 2

これは jQuery の回転を使用しませんが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を参照してください