IEでjavascriptのCSS変換を使用して画像を回転する

png画像（いくつかの円のディスク）を回転させる必要があります。これは、jQueryのいくつかの助けを借りて行われます：IE <のすべてのバージョンでIEでjavascriptのCSS変換を使用して画像を回転する

$.fn.rleft = function() { 
    return this.animate({ 
     rotate: '-=45deg' 
    }); 
};

9つの物事がひどく間違って行きます。回転アニメーションは気が狂っており、回転された後の画像のアルファ透明度には非常に醜いものが起こっています。

IE 8と7（そして多かれ少なかれIE 6？）でこの作業を行うことは可能ですか？もしそうでなければ、私はそれをフラッシュで行うように命ずることになるでしょう。しかし、私は最初にCSSとjavascript（svg？）を使ってそれをやろうとしたいと思います。別の技術、またはjsライブラリを使用するためのヒントはありますか？

ありがとうございました。

EDIT：CSSとJSを使用してIEでPNGイメージを回転させるためのソリューションが見つかりませんでした。それは言った、すべてがさえIE 6で非常に素晴らしい作品ラファエル、

EDIT2使用してやり直した：最終結果はラファエルで行わ：http://ipm-profil.de/diversity/ 私はGIF画像を使用して、SVGとそれらの円の「ギザギザ」をマスクし（ラファエルコード）。

出典

2011-01-09 Ernest

私はIE8上のサイトをテストし、すべてが不透明に見える... – Chandu

@Cybernate：非常に奇妙な、私はいくつかのコンピュータでそれをテストしました。参考画像で質問を更新しました。 – Ernest

IE8以前は黒い境界線に気付かなかった。はい、あなたは正しい、IE8はその歪みを示しています。 – Chandu

これにはRaphaël—JavaScript Libraryを使用することを強くお勧めします。 Raphaëlは現在、Firefox 3.0以上、Safari 3.0以上、Chrome 5.0以上、Opera 9.5以上、Internet Explorer 6.0以上をサポートしており、使いやすく、JQueryでもうまく機能します。

出典

2011-01-09 20:52:25

ありがとう、私はそれをチェックします。 – Ernest

SVGで行う価値があるかもしれません。 IE9を含むすべてのブラウザで動作します。 IE < 9では、SVGWebを使用できます。 SVGをサポートしていないブラウザでSVGを動作させるためのFlash shimです。

出典

2011-01-09 21:13:23

また面白いですね（SVGWeb）、ありがとう。 – Ernest

あなたは古いブラウザがそれを見ることができればIE 9はtransformプロパティを追加している気にしない場合：

-webkit-transform: rotate(15deg) /* for Safari/Chrome */ 
-moz-transform: rotate(15deg) /* for Firfox */ 
-ms-transform: rotate(15deg)  /* for hated IE */ 
transform: rotate(15deg)   /* The way it should be. */

そして私は、JSはポストの一番下にある http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.htmlで良いJSを見つけました。

出典

2011-03-16 17:24:02 webLacky3rdClass

実際には、IE 6+のサポートが必要でした。そして先に言及したRaphaëlは私にそれをさせました。しかし、答えをありがとう。 – Ernest

IEでjavascriptのCSS変換を使用して画像を回転する

答えて

関連する問題