How to rotate an image 90 degrees with css? (code example)

The content of this article is about how to rotate images 90 degrees with CSS? (Code example) has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Under Firefox:

-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);

Under IE:

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

This is the IE filter code part, the long and small letters in front are intricate We don't need to worry about it. Look at the "rotation=3" at the back. This is the key. The parameters here can be 0, 1, 2, 3. There is no 4. If it is 4, 5, etc., the picture will not rotate. .

The angle of rotation just needs to be multiplied by 90 (π/2). So "rotation=3" means rotating 270 degrees clockwise, which has the same meaning as transform:rotate(270deg); . Therefore, here, there will be some small limitations - rotation at any angle cannot be achieved, only 90 degrees, 180 degrees and 270 degrees.

However, the IE browser is not a simple Luo Luo. To achieve rotation at any angle, it still has a way, but it is more troublesome and difficult to understand than the above. It requires the use of matrix transformation filters. .

The demo is as follows:

<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="" />

The above is how to rotate the image 90 degrees with css? (Code examples) full introduction, if you want to know more about CSS3 video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to rotate an image 90 degrees with css? (code example). For more information, please follow other related articles on the PHP Chinese website!