web-dev-qa-db-ja.com

CSS3変換：回転; IE9で

私が行った設計では、垂直にする必要がある要素があります。 IE9を除くすべてのブラウザーで動作するためのCSSを持っています。 IE7およびIE8のフィルターを使用しました。

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

しかし、これはIE9で私の要素を透明にしているようで、CSS3の「変換」porpertyは何もしないようです！

とにかくIE9の要素を回転させることを知っていますか？

本当に助かります！

W.

cssinternet-explorercss3rotationinternet-explorer-9
77
wilsonpage

標準のCSS3ローテートはIE9で機能するはずですが、次のようにベンダープレフィックスを付ける必要があると思います。

  -ms-transform: rotate(10deg);

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

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

[編集]
人々はさらなるドキュメントを求めています。彼らが言うように、これはかなり限られていますが、私はこのページを見つけました： http://css3please.com/ これはすべてのブラウザでさまざまなCSS3機能をテストするのに役立ちます。

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

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

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

[編集]
質問に関連し、物事を容易にする可能性のある CSS Sandpaper と呼ばれるハックについて最近発見したため、この古い答えを復活させました。

このハックは、IEの古いバージョンの標準CSS transformのサポートを実装しています。したがって、CSSに次を追加できます。

-sand-transform: rotate(10deg);

... IE 6/7/8で、filter構文を使用せずに動作するようにします。 （もちろん、舞台裏でフィルター構文を使用していますが、他のブラウザーと同様の構文を使用しているため、管理がはるかに簡単になります）

137
Spudley

これを試して

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    margin-left: 50px;
    margin-top: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
}
.rotate {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -sand-transform: rotate(10deg);
    display: block;
    position: fixed;
}
</style>
</head>

<body>
<div class="rotate">Alpesh</div>
</body>
</html>
5
Alpesh Panchal

IE9の変換にも問題があり、-ms-transform: rotate(10deg)を使用しましたが、機能しませんでした。できることはすべて試してみましたが、問題はブラウザーモードにありました。変換を機能させるには、互換モードを「標準IE9」に設定する必要があります。

4
Katherine Mokhova

私はこれが古いことを知っていますが、私はこの同じ問題を抱えていて、この投稿を見つけました、そしてそれは何が間違っていたかを正確に説明しませんでしたが、正しい答えを助けてくれました-したがって、私の答えは私と同様の問題。

垂直に回転させたい要素があったので、当然IE8の場合はフィルターを追加し、IE9の場合は-ms-transformプロパティを追加しました。私が見つけたのは、-ms-transformプロパティと同じ要素にフィルターを適用すると、IE9がその要素を非常にうまくレンダリングしないということです。私の解決策：

  1. Transform-Originプロパティを使用している場合は、MS用にも追加します（-ms-transform-Origin：左下;）。要素が表示されない場合は、要素が中央の軸を中心に回転しているため、何らかの理由でページから離れている可能性があります。

  2. IE7＆8のfilter：プロパティを別のスタイルシートに移動し、IE条件を使用してIE9未満のブラウザーにそのスタイルシートを挿入します。この方法では、IE9スタイルには影響せず、すべて正常に動作するはずです。

  3. 正しいDOCTYPEタグも使用するようにしてください。間違っているとIE9は正常に動作しません。

3
Steve