Comment faire pivoter une image de 90 degrés avec CSS ? (exemple de code)

Le contenu de cet article explique comment faire pivoter les images de 90 degrés avec CSS ? (Exemple de code) a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Sous Firefox :

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

ie Sous :

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

Voici la partie code du filtre ie, le recto est long Nous n'avons pas à nous soucier de la partie complexe des majuscules. Regardez "rotation=3" à l'arrière. Les paramètres ici peuvent être 0, 1, 2, 3. Il n'y a pas de 4. Si c'est 4, 5, etc., l'image ne pivotera pas.

L'angle de rotation doit simplement être multiplié par 90 (π/2). Donc "rotation=3" signifie une rotation dans le sens des aiguilles d'une montre de 270 degrés, ce qui a la même signification que transform:rotate(270deg) ; . Par conséquent, il y aura ici quelques petites limitations - une rotation sous n'importe quel angle ne peut être obtenue, seulement 90 degrés, 180 degrés et 270 degrés.

Cependant, le navigateur IE n'est pas un simple Luoluo. Pour réaliser une rotation sous n'importe quel angle, il a encore un moyen, mais il est plus gênant et difficile à comprendre que ce qui précède. filtres.

La démo est la suivante :

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

Ce qui précède est de savoir comment faire pivoter l'image de 90 degrés avec CSS ? (Exemples de code) introduction complète, si vous souhaitez en savoir plus sur le Tutoriel vidéo CSS3, veuillez faire attention au site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!