[解決済み] jQueryでdivを回転させる方法【終了しました

質問

jQueryを使ってdivを回転させることは可能ですか？画像は回転させることができますが、divを回転させることはできません。このための解決策はありますか？

どのように解決するのですか？

EDIT: jQuery 1.8用に更新しました。

jQuery 1.8 からは、ブラウザ固有の変換が自動的に追加されます。 jsFiddleデモ

var rotation = 0;

jQuery.fn.rotate = function(degrees) {
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};

$('.rotate').click(function() {
    rotation += 5;
    $(this).rotate(rotation);
});

EDIT: jQueryの関数にするためのコードを追加しました。

これ以上読みたくないという人のために、どうぞ。詳細と例については、こちらをお読みください。 jsFiddleデモ .

var rotation = 0;

jQuery.fn.rotate = function(degrees) {
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};

$('.rotate').click(function() {
    rotation += 5;
    $(this).rotate(rotation);
});

EDIT: この投稿のコメントのひとつに、次のようなものがありました。 jQuery Multirotation . このjQueryのプラグインは、基本的に上記の機能をIE8をサポートした上で実行します。最大限の互換性を求める場合や、より多くのオプションを求める場合は、使用する価値があるかもしれません。しかし、最小限のオーバーヘッドを求めるなら、私は上記の機能をお勧めします。それはIE9 +、Chrome、Firefox、Opera、および多くの他を動作します.

ボビー... これは実際にjavascriptでやりたい人のためのものです。javascriptのコールバックで回転させるために必要な場合があります。

以下は jsFiddle .

カスタム間隔で回転させたい場合は、クラスを追加する代わりに、jQueryを使って手動でcssを設定することができます。例えば これ ! 私は、回答の下部に両方のjQueryオプションを含めています。

HTML

<div class="rotate">
    <h1>Rotatey text</h1>
</div>

CSS

/* Totally for style */
.rotate {
    background: #F02311;
    color: #FFF;
    width: 200px;
    height: 200px;
    text-align: center;
    font: normal 1em Arial;
    position: relative;
    top: 50px;
    left: 50px;
}

/* The real code */
.rotated {
    -webkit-transform: rotate(45deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(45deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(45deg);  /* IE 9 */
    -o-transform: rotate(45deg);  /* Opera 10.50-12.00 */
    transform: rotate(45deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */
}

jQuery

これらが$(document).readyでラップされていることを確認する。

$('.rotate').click(function() {
    $(this).toggleClass('rotated');
});

カスタムインターバル

var rotation = 0;
$('.rotate').click(function() {
    rotation += 5;
    $(this).css({'-webkit-transform' : 'rotate('+ rotation +'deg)',
                 '-moz-transform' : 'rotate('+ rotation +'deg)',
                 '-ms-transform' : 'rotate('+ rotation +'deg)',
                 'transform' : 'rotate('+ rotation +'deg)'});
});