Wie drehe ich ein Bild mit CSS um 90 Grad? (Codebeispiel)

Der Inhalt dieses Artikels befasst sich mit der Frage, wie man Bilder mit CSS um 90 Grad dreht. (Codebeispiel) hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Unter Firefox:

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

ie Unter:

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

Hier ist der ie-Filtercodeteil, die langen Groß- und Kleinbuchstaben Vorderseite ist gemischt. Schauen Sie sich die „Rotation=3“ auf der Rückseite an. Die Parameter hier können 0, 1, 2, 3 sein. Es gibt keine 4. Wenn ja 4, 5 usw. ist, wird das Bild nicht gedreht.

Der Drehwinkel muss nur mit 90 (π/2) multipliziert werden. „Rotation=3“ bedeutet also eine Drehung im Uhrzeigersinn um 270 Grad, was die gleiche Bedeutung hat wie transform:rotate(270deg); . Daher gibt es hier einige kleine Einschränkungen – eine Drehung in jedem beliebigen Winkel ist nicht möglich, sondern nur 90 Grad, 180 Grad und 270 Grad.

Der IE-Browser ist jedoch kein einfacher Luoluo, er hat immer noch eine Möglichkeit, die jedoch schwieriger und schwieriger zu verstehen ist als die oben genannte. Er erfordert die Verwendung einer Matrixtransformation Filter.

Die Demo lautet wie folgt:

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

Wie kann man das Bild mit CSS um 90 Grad drehen? (Codebeispiele) Vollständige Einführung. Wenn Sie mehr über das CSS3-Video-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonWie drehe ich ein Bild mit CSS um 90 Grad? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!