IEでのCSS rotateプロパティ

質問

DIVをある角度だけ回転させたい。FFでは機能しますが、IEでは問題に直面しています。

例えば、次のスタイルで私はrotation=1～4を設定することができます。

 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

これは、DIVが90度、180度、270度、360度に回転されることを意味する。しかし、もし私がDIVを20度だけ回転させる必要があるならば、それはもう機能しません。

IEでこの問題を解決するにはどうしたらよいでしょうか。

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

IEで45度回転させるためには、スタイルシートに以下のコードを記述する必要があります。

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

上記から、IE8はIE6/7と異なる構文であることがわかると思います。すべてのバージョンの IE をサポートしたい場合は、両方のコードの行を提供する必要があります。

そこにある恐ろしい数字はラジアン単位です。45 度以外の角度を使用したい場合は、自分で数字を計算する必要があります (たとえば、次のようなものがあります。 チュートリアル を探せばあります）。

また、IE6/7 構文は、フィルタ文字列のエスケープされていないコロン記号のために、他のブラウザで問題を引き起こすことに注意してください、それは無効な CSS であることを意味します。私のテストでは、これにより、Firefox はフィルタの後のすべての CSS コードを無視します。この現象は、何時間もかかるので、注意が必要です。私は、IE 固有のものを別のスタイルシートに記述し、他のブラウザが読み込まないようにすることで、これを解決しました。

他のすべての現行ブラウザ (IE9 と IE10 を含む - やった！) は、CSS3 の transform スタイルをサポートしているので、次のコードを使用して他のすべてのブラウザーで同じ効果を得ることができます。

-moz-transform: rotate(45deg);  /* FF3.5/3.6 */
-o-transform: rotate(45deg);  /* Opera 10.5 */
-webkit-transform: rotate(45deg);  /* Saf3.1+ */
transform: rotate(45deg);  /* Newer browsers (incl IE9) */

お役に立てれば幸いです。

編集

この回答はまだアップボートを獲得しているので、次のようなJavaScriptライブラリに関する情報を更新する必要があると思います。 CSS サンドペーパー という JavaScript ライブラリに関する情報を更新する必要があると思います。このライブラリにより、古い IE バージョンでも回転のために (ほぼ) 標準の CSS コードを使用できます。

CSS Sandpaper をサイトに追加すると、IE6-8 用に以下のような CSS コードを書くことができるはずです。

-sand-transform: rotate(40deg);

従来の filter のスタイルよりもはるかに簡単です。

編集

また、IE9 (および IE9 のみ) に特有の癖があり、IE9 は標準の transform と古いスタイルの IE -ms-filter . の両方が指定されていると、IE9 は完全に混乱し、要素があったはずの場所に黒い固い箱だけをレンダリングすることになります。これに対する最良の解決策は filter スタイルを避けることです。