CSS3 Transform を使用して IE9 で要素を回転するにはどうすればよいですか?

IE9 での CSS3 変換: 回転

この記事は、IE9 での要素の回転の問題を解決することを目的としています。

質問

デザインには垂直要素が必要です。ただし、CSS は IE9 を除くすべてのブラウザで正常に動作します。 IE7 と IE8 では filter 属性を使用しました:

progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

しかし、これにより IE9 では要素が透明になり、CSS3 の "transform" プロパティは効果がないようでした。

回答

標準の CSS3 ローテーションは IE9 で機能するはずですが、次のようにベンダー プレフィックスを追加する必要があると考えられます:

-ms-transform: rotate(10deg);

ベータ版では利用できない可能性があります。そうでない場合は、ベータ版より新しいバージョンである現在のプレビュー バージョン (プレビュー 7) をダウンロードしてみてください。ベータ版がないため、そのバージョンにあるかどうかを確認できません。最終バージョンでは必ずサポートする予定です。

IE 9 では、IE 固有のフィルター属性が削除されていることも確認できます。

さらなるドキュメント

非常に限定されていると言われていますが、次のページを見つけました: http://css3please.com/ これはすべてのブラウザに役立ちます。ブラウザーでさまざまな CSS3 機能をテストします。

しかし、IE9 プレビューでこのページの回転機能をテストすると、ひどいクラッシュが発生します。

ただし、IE9 の -ms-transform:rotate() を独自のテスト ページで個別にテストしたところ、問題なく動作しました。したがって、私たちの結論は、この機能は実装されていますが、おそらく動的設定に関連するいくつかのバグがあるということです。

どの機能がどのブラウザに実装されているかを判断するためのもう 1 つの便利な参照ポイントは www.canIuse.com です -- http://caniuse.com/#search=rotation を参照してください

最新Update

この問題に関連し、物事を簡単にする可能性のある CSS Sandpaper と呼ばれるハックについて最近知ったため、この古い回答を再投稿します。

このハックは、IE の古いバージョンでの標準 CSS 変換のサポートを実装します。これで、CSS に

-sand-transform: rotate(10deg);

... を追加すると、フィルター構文を使用せずに IE 6/7/8 で機能するようになります。 (もちろん、内部では引き続きフィルター構文を使用しますが、他のブラウザ構文と同様の構文を使用することで簡単になります。)

以上がCSS3 Transform を使用して IE9 で要素を回転するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。