Internet Explorer で DIV 要素を特定の角度で回転するにはどうすればよいですか?

IE で CSS 回転プロパティを使用した DIV の回転

CSS 回転プロパティは、Web ページ上の要素を変換するための強力なツールです。ただし、IE ユーザーは要素を特定の角度で回転しようとすると問題が発生する可能性があります。

問題

問題を説明するには、次のスタイルを考慮してください:

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

このスタイルは、DIV を 90、180、270、または 360 度のいずれかに回転します。ただし、DIV を 20 度だけ回転させることが目的の場合、このアプローチは効果的ではありません。

解決策

IE で要素を特定の度だけ回転するには、次のコードが必要です。

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 バージョンをサポートするには、両方のコード行が必要です。

コード内の数字は度ではなくラジアンを表すことに注意してください。したがって、目的の回転を実現するには、目的の角度をラジアンに変換する必要がある場合があります。

その他のブラウザの互換性

IE9 や IE10 を含む他のすべての最新ブラウザは、CSS3 変換スタイルをサポートしています。これにより、次のコードを使用して要素の回転が可能になります。

-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) */

追加の考慮事項

• IE6/7 構文は、無効な CSS 文字により他のブラウザーで問題を引き起こす可能性があります。この問題を回避するには、特定の IE スタイルを別のスタイルシートに配置できます。
• CSS Sandpaper は、古い IE バージョンでも、回転に標準 CSS コードを使用できるようにする JavaScript ライブラリです。
• IE9 には、標準の変換と -ms-filter スタイルの両方を使用するとレンダリングの問題が発生する可能性があるという癖があります。これを回避するには、代わりに CSS Sandpaper ポリフィルを使用することをお勧めします。

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