IE9でCSS3のtransform: rotate;を使用する。

質問

あるデザインで、縦長にする必要のある要素があります。IE9以外のすべてのブラウザで動作するように、このためのCSSを取得しました。IE7 & IE8用のフィルタを使用しました。

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

しかし、これはIE9で私の要素を透明にするようで、CSS3の 'tranform' 属性は何もしないようです!

誰かIE9で要素を回転させる方法を知っていますか？

本当にありがとうございます。

W.

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

IE9では標準のCSS3 rotateが動作するはずですが、以下のようにベンダープレフィックスをつける必要があると思います。

  -ms-transform: rotate(10deg);

ベータ版では動作しない可能性があります。動作しない場合は、ベータ版より後のリビジョンである現在のプレビュー版（プレビュー7）をダウンロードして試してみてください。私はテスト用のベータ版を持っていないので、そのバージョンにあったかどうかを確認することはできません。最終リリース版では間違いなくサポートされる予定です。

また、IE 固有の filter プロパティが IE9 で廃止されたことも確認できます。

[編集］

人々はいくつかのさらなるドキュメントを要求しました。彼らが言うように、これはかなり限定的なものですが、私はこのページを見つけました。 http://css3please.com/ これは、すべてのブラウザでさまざまな CSS3 機能をテストするのに便利です。

しかし、IE9 プレビューでこのページの回転機能をテストすると、かなり派手にクラッシュしてしまいました。

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

どの機能がどのブラウザで実装されているかについてのもうひとつの有用なリファレンス ポイントは、www.canIuse.com です。 http://caniuse.com/#search=rotation を参照してください。

[EDIT］

というハックを最近知ったので、この古い回答を復活させます。 CSS サンドペーパー というハックを最近知ったので、古い回答を復活させます。

このハックは、標準的なCSSの transform のサポートを実装しています。これで、あなたのCSSに以下のように追加することができます。

-sand-transform: rotate(10deg);

...そして、IE 6/7/8 で動作するようにするために filter の構文を使うことなく、IE 6/7/8 で動作します。(もちろん、裏ではまだフィルター構文を使用していますが、他のブラウザーと同様の構文を使用しているため、管理が非常に簡単になります)