Wie kann ich Text mithilfe von CSS-Transformationen horizontal und vertikal spiegeln?

Text mithilfe von CSS-Transformationen umdrehen

In CSS können Sie Text und andere Elemente mithilfe von Transformationen bearbeiten. Eine häufige Transformation ist das Spiegeln, auch Flippen genannt. Dieser Effekt kann mit einer einfachen CSS-Eigenschaft erzielt werden.

Um Text horizontal zu spiegeln (über die vertikale Achse zu spiegeln), verwenden Sie die folgende CSS-Eigenschaft:

-moz-transform: Skala(-1, 1);
-webkit-transform: Skala(-1, 1);
-o-transform: Skala(-1, 1);
-ms-transform: Skala( -1, 1);
transform: scale(-1, 1);

Diese Eigenschaft skaliert das Element horizontal um -1 und dreht es effektiv entlang der vertikalen Achse.

Um Text vertikal zu spiegeln (über die horizontale Achse zu spiegeln), verwenden Sie auf ähnliche Weise diese Eigenschaft:

-moz-transform: scale(1, -1);
-webkit-transform : Skala(1, -1);
-o-transform: Skala(1, -1);
-ms-transform: Skala(1, -1);
transform: Skala(1, -1); -1);

Durch Anwenden dieser Eigenschaft skalieren Sie das Element vertikal um -1 und spiegeln es entlang der horizontalen Achse.

Beispiel

Betrachten Sie den folgenden HTML-Code, der etwas Text und ein Scherenzeichen anzeigt:

Demotext ✂
Demotext ✂

Der folgende CSS-Code wendet die horizontalen und vertikalen Spiegelungseffekte auf die entsprechenden Bereiche an:

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

Dadurch werden die Scherenzeichen entlang ihrer jeweiligen Achsen gespiegelt, wodurch die gewünschte nach links zeigende Schere entsteht.

Das obige ist der detaillierte Inhalt vonWie kann ich Text mithilfe von CSS-Transformationen horizontal und vertikal spiegeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!