web-dev-qa-db-ja.com

jQueryでのDiv要素の回転

Div要素を回転させようとしています...これはDOM冒aspかもしれませんが、おそらくcanvas要素で動作しますか？私にはわからない-もし誰かがこれがどのように機能するのか、なぜ機能しないのかについての考えを持っているなら、私は知りたい。ありがとう。

jqueryajaxdomcanvasjquery-animate
59
user43889

DIVを回転するにはWebkitTransform / -moz-transform: rotate(Xdeg)を使用します。

これはIEでは機能しません。 Raphaelライブラリは、IE and回転を行うで動作します。 canvases

回転をアニメーション化する場合は、再帰setTimeout()を使用できます

おそらく、jQueryの.animate()でスピンの一部を行うこともできます。

エレメントの幅を考慮してください。表示コンテンツよりも幅が広いを回転させると、面白い結果が得られます。ただし、要素の幅を狭めることができ、それからそれらを回転させます。

これは、jQueryオブジェクトの要素を回転させる単純なjQueryスニペットです。回転を開始および停止できます。

$(function() {
    var $elie = $(selectorForElementsToRotate);
    rotate(0);
    function rotate(degree) {

          // For webkit browsers: e.g. Chrome
        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
          // For Mozilla browser: e.g. Firefox
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});

          // Animate rotation with a recursive call
        setTimeout(function() { rotate(++degree); },5);
    }
});

jsFiddleの例

注：
次数を増やして増やすと、画像が時計回りに回転します。回転角度を下げると、画像が回転します 反時計回り 。

24
Peter Ajtai

ええ、あなたは私が思うに多くの運を持たないでしょう。通常、主要なブラウザが使用する3つの描画方法（Canvas、SVG、VML）全体で、テキストのサポートは不十分です。画像を回転させたい場合はそれで十分ですが、フォーマットとスタイルが混在するコンテンツがある場合はおそらくそうではありません。

クロスブラウザ描画APIについては、 RaphaelJS をご覧ください。

7
nickf

任意の要素のクロスブラウザー回転。 IE7およびIE8で動作します。 IE7ではJSFiddleで動作していないように見えますが、私のプロジェクトではIE7でも動作しました

http://jsfiddle.net/RgX86/24/

var elementToRotate = $('#rotateMe');
var degreeOfRotation = 33;

var deg = degreeOfRotation;
var deg2radians = Math.PI * 2 / 360;
var rad = deg * deg2radians ;
var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);

var m11 = costheta;
var m12 = -sintheta;
var m21 = sintheta;
var m22 = costheta;
var matrixValues = 'M11=' + m11 + ', M12='+ m12 +', M21='+ m21 +', M22='+ m22;

elementToRotate.css('-webkit-transform','rotate('+deg+'deg)')
    .css('-moz-transform','rotate('+deg+'deg)')
    .css('-ms-transform','rotate('+deg+'deg)')
    .css('transform','rotate('+deg+'deg)')
    .css('filter', 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')')
    .css('-ms-filter', 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\','+matrixValues+')');

編集13/09/13 15:00ニースで簡単な、チェーン可能なjqueryプラグインに包まれました。

使用例

$.fn.rotateElement = function(angle) {
    var elementToRotate = this,
        deg = angle,
        deg2radians = Math.PI * 2 / 360,
        rad = deg * deg2radians ,
        costheta = Math.cos(rad),
        sintheta = Math.sin(rad),

        m11 = costheta,
        m12 = -sintheta,
        m21 = sintheta,
        m22 = costheta,
        matrixValues = 'M11=' + m11 + ', M12='+ m12 +', M21='+ m21 +', M22='+ m22;

    elementToRotate.css('-webkit-transform','rotate('+deg+'deg)')
        .css('-moz-transform','rotate('+deg+'deg)')
        .css('-ms-transform','rotate('+deg+'deg)')
        .css('transform','rotate('+deg+'deg)')
        .css('filter', 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')')
        .css('-ms-filter', 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\','+matrixValues+')');
    return elementToRotate;
}

$element.rotateElement(15);

JSFiddle： http://jsfiddle.net/RgX86/175/

7
Pawel

役立つ2つのjQueryパッチを以下に示します（この記事を読むまでにjQueryに既に含まれている可能性があります）。

1
David Herse

DOM/CSSを使用して要素を回転できるとは思えません。あなたの最善の策は、キャンバスにレンダリングし、それを回転させることです（詳細はわかりません）。

0
strager

編集：jQuery 1.8用に更新

jQuery 1.8は、ブラウザー固有の変換を追加します。 jsFiddle Demo

var rotation = 0;

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

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

編集：jQuery関数にするためのコードを追加しました。

これ以上読みたくない人のために、ここに行きます。詳細と例については、以下をお読みください。 jsFiddle Demo 。

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

編集：この投稿に関するコメントの1つ jQuery Multirotation 。このjQueryのプラグインは、本質的にIE8をサポートする上記の機能を実行します。最大の互換性またはより多くのオプションが必要な場合は、使用する価値があります。ただし、オーバーヘッドを最小限に抑えるには、上記の機能をお勧めします。 IE9 +、Chrome、Firefox、Opera、および他の多くの製品で動作します。

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

jsFiddle です。

カスタム間隔でローテーションする場合、クラスを追加する代わりにjQueryを使用してcssを手動で設定できます。 this ！答えの下部に両方の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)'});
});
0
Dan Grahn