ホームページ > 記事 > ウェブフロントエンド > CSSで画像を90度回転するにはどうすればいいですか? (コード例)
この記事の内容はCSSで画像を90度回転させる方法についてです。 (コード例) は参考になると思います。
Firefox の場合:
-moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg);
IE の場合:
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
これは IE のフィルター コード部分で、先頭にある長い文字と小さな文字です。後ろの「rotation=3」を見てください。ここのパラメータは 0、1、2、3 です。4 はありません。 4、5 などの場合、画像は回転しません。
回転角度はこれらの値を 90 (π/2) 倍することで決定できるため、「rotation=3」は時計回りに 270 度回転することを意味し、transform:rotate と同じ意味になります。 (270度);したがって、ここではいくつかの小さな制限があります。どの角度での回転も実現できず、90 度、180 度、270 度のみです。
ただし、IE ブラウザは単純な羅羅ではありません。任意の角度で回転させるには、上記の方法よりも面倒で理解しにくいものがあります。変換フィルター。
デモは次のとおりです:
<style > img{ margin:100px auto 0; -moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } </style> <img src="images/006.gif" alt="" />
上記は CSS で画像を 90 度回転する方法です。 (コード例) 完全な紹介。CSS3 ビデオ チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。
以上がCSSで画像を90度回転するにはどうすればいいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。