web-dev-qa-db-ja.com

IEのCSS回転プロパティ

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

たとえば、次のスタイルではrotation = 1から4に設定できます

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

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

IEでこの問題を解決するにはどうすればよいですか？

cssinternet-explorerrotation
73
user160820

次のようにマトリックス変換を行う必要があります。

filter: progid:DXImageTransform.Microsoft.Matrix(
  M11 = COS_THETA,
  M12 = -SIN_THETA,
  M21 = SIN_THETA,
  M22 = COS_THETA,
  sizingMethod = 'auto expand'
);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
  M11 = COS_THETA,
  M12 = -SIN_THETA,
  M21 = SIN_THETA,
  M22 = COS_THETA,
  SizingMethod = 'auto expand'
)";

ここで、COS_THETAとSIN_THETAは、角度のコサインとサインの値です（45°の場合は0.70710678）。

58
zzzzBov

IETransformsTranslatorと呼ばれるオンラインツールがあります。このツールを使用すると、IE6、IE7およびIE8で機能するマトリックスフィルター変換を作成できます。 CSS3変換関数（例：rotate（15deg））を貼り付けるだけで、残りは処理されます。 http://www.useragentman.com/IETransformsTranslator/

26
nmsdvid

http://css3please.com/

Microsoft IE9 +プレフィックスの「.box_rotate」までスクロールします。ここで同様の議論： jQueryでのDiv要素の回転

6
Steve Burrows

ちょっとしたヒント...「transform：rotate（）」、またはモバイルで「-ms-transform：rotate（）」（IE9）を使用する前によく考えてください。

私は何日も壁を激しく叩いてきました。画像をスライドさせ、さらにその上にコマンドエリアを配置する「運動」システムが進行中です。矢印ボタンを「変形」して上下をシミュレートしました... 1.000以上のコード行を長い間見直しました!!! ;-)

CSSからtransform：rotateを削除すると、問題ありません。他のブラウザと比較して、IEがそれを処理する方法は少し（悪い言葉を使わないで）トリッキーです。

@Spudleyのすばらしい答えです！書いてくれてありがとう！

2
Pedro Ferreira

sefull LinkIE変換用

このツールは、Microsoft独自のVisual Filtersテクノロジーを使用して、CSS3 Transformプロパティ（ほとんどすべての最新ブラウザーが使用する）を同等のCSSに変換します。

2
Prashant Tapase

IE11の例（ブラウザータイプ=トライデントバージョン= 7.0）：

image.style.transform = "rotate(270deg)";
0
C_J