Mit CSS Text spiegeln

Ist es möglich, Text mit CSS so zu manipulieren, dass er gespiegelt oder gespiegelt erscheint? Beispielsweise möchten wir möglicherweise das Scherenzeichen „✂“ nach links und nicht nach rechts zeigend anzeigen.

CSS-Transformationen zur Rettung

CSS-Transformationen machen es möglich, dies zu erreichen diesen Effekt. Um Text horizontal zu spiegeln, skalieren Sie das Element negativ auf der 1, 1);

-o-transform: Skala(-1, 1);

-ms-transform: Skala(-1, 1);
transform: Skala(-1, 1);
``

Um Text vertikal zu spiegeln, skalieren Sie das Element negativ auf der y-Achse:

``

-moz-transform: scale(1, -1);

-webkit-transform: Scale(1, -1);

-o-transform: Scale(1, -1);

-ms-transform: Scale(1, -1);
transform: scale(1, -1);
``


Demonstration

So nutzen Sie diese Transformationen in der Praxis:

span{ display: inline-block; Rand:1em; } .flip_H{ transform: scale(-1, 1); Farbe: rot; } .flip_V{ transform: scale(1, -1); Farbe: grün; }

span{ display: inline-block; margin:1em; } 
.flip_H{ transform: scale(-1, 1); color:red; }
.flip_V{ transform: scale(1, -1); color:green; }

Durch Hinzufügen der entsprechenden Klassen .flip_H oder .flip_V zu Elementen können Sie Text einfach horizontal oder vertikal spiegeln.