アニメーション要素変換回転

jQueryを使用して要素を回転させるにはどうすればよい.animate()ですか？現在不透明度を正しくアニメーション化している以下の行を使用していますが、これはCSS3変換をサポートしていますか？

$(element).animate({
   opacity: 0.25,
   MozTransform: 'rotate(-' + -amount + 'deg)',
   transform: 'rotate(' + -amount + 'deg)'
});

私の知る限り、基本的なアニメーションは数値以外のCSSプロパティをアニメーション化できません。

ステップ関数とユーザーのブラウザに適したcss3変換を使用して、これを実行できると思います。CSS3変換は、すべてのブラウザーをカバーするのに少し注意が必要です（IE6では、たとえば、マトリックスフィルターを使用する必要があります）。

編集：これはWebkitブラウザ（Chrome、Safari）で機能する例です：http：//jsfiddle.net/ryleyb/ERRmd/

IE9のみをサポートしたい場合transformは-webkit-transform、の代わりにを使用するか、-moz-transformFireFoxをサポートします。

使用されるトリックは、気にしないCSSプロパティ（text-indent）をアニメーション化し、その値をステップ関数で使用して回転を行うことです。

$('#foo').animate(
..
step: function(now,fx) {
  $(this).css('-webkit-transform','rotate('+now+'deg)'); 
}
...

ライリーの答えは素晴らしいですが、要素内にテキストがあります。他のすべてと一緒にテキストを回転させるために、text-indentの代わりにborder-spacingプロパティを使用しました。

また、少し明確にするために、要素のスタイルで、初期値を設定します。

#foo {
    border-spacing: 0px;
}

次に、アニメーションチャンクで、最終的な値は次のようになります。

$('#foo').animate({  borderSpacing: -90 }, {
    step: function(now,fx) {
      $(this).css('transform','rotate('+now+'deg)');  
    },
    duration:'slow'
},'linear');

私の場合、反時計回りに90度回転します。

これがライブデモです。

私の意見では、jQueryanimateは、transition2Dまたは3Dプロパティでそのようなアニメーションを実行するCSS3と比較して、少し使い古されています。また、それをブラウザーに任せて、JavaScriptと呼ばれるレイヤーを忘れることで、CPUの無駄を省くことができるのではないかと心配しています。特に、アニメーションを爆破したい場合はそうです。したがって、JavaScriptで機能を定義するので、スタイル定義があるアニメーションが好きです。JavaScriptに挿入するプレゼンテーションが多いほど、後で直面する問題も多くなります。

addClassアニメーション化する要素を使用するだけで、CSStransitionプロパティを持つクラスを設定できます。アニメーションを「アクティブ化」するだけで、純粋なプレゼンテーション層に実装されたままになります。

.js

// with jQuery
$("#element").addClass("Animate");

// without jQuery library
document.getElementById("element").className += "Animate";

一つはイースリー可能性がjQueryを使ってクラスを削除、またはライブラリなしでクラスを削除します。

.css

#element{
    color      : white;
}

#element.Animate{
    transition        : .4s linear;
    color             : red;
    /** 
     * Not that ugly as the JavaScript approach.
     * Easy to maintain, the most portable solution.
     */
    -webkit-transform : rotate(90deg);
}

.html

<span id="element">
    Text
</span>

これは、ほとんどのユースケースで高速で便利なソリューションです。

また、別のスタイル（代替CSSプロパティ）を実装したい場合や、グローバルな.5sアニメーションを使用してオンザフライでスタイルを変更したい場合にもこれを使用します。次のBODYような形式の代替CSSを使用しながら、に新しいクラスを追加します。

.js

$("BODY").addClass("Alternative");

.css

BODY.Alternative #element{
    color      : blue;
    transition : .5s linear;
}

このようにして、さまざまなCSSファイルをロードせずに、アニメーションでさまざまなスタイルを適用できます。を設定するためにJavaScriptを使用するだけclassです。

Ryleyとatonycの答えに追加するには、実際のように、実際のCSSプロパティを使用する必要はありませんtext-indexかborder-spacing、その代わりに、あなたは次のように、偽のCSSプロパティを指定することができますrotationかmy-awesome-property。将来、実際のCSSプロパティになるリスクのないものを使用することをお勧めします。

また、誰かが同時に他のものをアニメーション化する方法を尋ねました。これは通常どおりstep実行できますが、アニメーション化されたすべてのプロパティに対して関数が呼び出されるため、次のようにプロパティを確認する必要があります。

$('#foo').animate(
    {
        opacity: 0.5,
        width: "100px",
        height: "100px",
        myRotationProperty: 45
    },
    {
        step: function(now, tween) {
            if (tween.prop === "myRotationProperty") {
                $(this).css('-webkit-transform','rotate('+now+'deg)');
                $(this).css('-moz-transform','rotate('+now+'deg)'); 
                // add Opera, MS etc. variants
                $(this).css('transform','rotate('+now+'deg)');  
            }
        }
    });

（注：jQueryドキュメントで「Tween」オブジェクトのドキュメントが見つかりません。アニメーションドキュメントページから、http：//api.jquery.com/Types#Tweenへのリンクがあります。これは、存在しないようです。TweenプロトタイプのコードはGithubのここにあります）。

CSSトランジションを使用するだけです。

$(element).css( { transition: "transform 0.5s",
                  transform:  "rotate(" + amount + "deg)" } );

setTimeout( function() { $(element).css( { transition: "none" } ) }, 500 );

例として、アニメーションの長さを0.5秒に設定しました。

アニメーションが終了した後（500ミリ秒）にcssプロパティsetTimeoutを削除することに注意してくださいtransition

読みやすくするために、ベンダープレフィックスを省略しました。

このソリューションでは、もちろんブラウザの移行サポートが必要です。

私はこの投稿に出くわし、jQueryでCSS変換を使用して無限ループアニメーションを作成しようと考えました。これは私にとってはうまくいきました。でもそれがどれほどプロフェッショナルかはわかりません。

function progressAnim(e) {
    var ang = 0;

    setInterval(function () {
        ang += 3;
        e.css({'transition': 'all 0.01s linear',
        'transform': 'rotate(' + ang + 'deg)'});
    }, 10);
}

使用例：

var animated = $('#elem');
progressAnim(animated)

//this should allow you to replica an animation effect for any css property, even //properties //that transform animation jQuery plugins do not allow

            function twistMyElem(){
                var ball = $('#form');
                document.getElementById('form').style.zIndex = 1;
                ball.animate({ zIndex : 360},{
                    step: function(now,fx){
                        ball.css("transform","rotateY(" + now + "deg)");
                    },duration:3000
                }, 'linear');
            }