[解決済み] アニメート要素の変形・回転

質問

要素を回転させるには、jQueryの .animate() ? 私は以下の行を使用しており、現在正しく不透明度をアニメーション化していますが、これはCSS3トランスフォームをサポートしていますか？

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

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

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

私は、あなたがこれを行うことができると信じています ステップ 関数と、ユーザーのブラウザに適した CSS3 トランスフォームを使用することで実現できると思います。 CSS3 transformは、すべてのブラウザをカバーするには少し厄介です（たとえばIE6ではMatrixフィルタを使う必要があります）。

EDIT : ウェブキットブラウザ（Chrome、Safari）で動作する例です。 http://jsfiddle.net/ryleyb/ERRmd/

IE9 のみに対応させたい場合は transform の代わりに -webkit-transform または -moz-transform であれば、FireFoxをサポートします。

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

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