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="/static/imghwm/default1.png"  data-src="images/006.gif"  class="lazy"   alt="" />

上記は CSS で画像を 90 度回転する方法です。 (コード例) 完全な紹介。CSS3 ビデオ チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

以上がCSSで画像を90度回転するにはどうすればいいですか？ (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。