Flipping Text mit CSS -Transformationen

In CSS können Sie Text und andere Elemente mit Transformationen manipulieren. Eine gemeinsame Transformation ist die Spiegelung, auch als Flipping bekannt. Dieser Effekt kann unter Verwendung einer einfachen CSS-Eigenschaft erreicht werden.

, um den Text horizontal umzudrehen (spiegeln Sie sie über die vertikale Achse) und verwenden Sie die folgende CSS-Eigenschaft:

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

Diese Eigenschaft skaliert das Element horizontal durch -1, um es effektiv entlang der vertikalen Achse zu drehen.

In ähnlicher Weise können Sie den Text vertikal umdrehen (spiegeln Sie ihn über die horizontale Achse) und verwenden Sie diese Eigenschaft:

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

Indem Sie diese Eigenschaft anwenden, skalieren Sie das Element vertikal mit -1 und drehen Sie es entlang der horizontalen Achse. ]

Demo -Text ✂

Der folgende CSS -Code wendet die horizontalen und vertikalen Flipping -Effekte auf die entsprechenden Spans an:

span {display: inline: inline: inline: inline: inline: inline -Block; Rand: 1EM; }

. flip_v {transform: scale (1, -1); Farbe: grün; }


Dies spiegelt die Scherenzeichen entlang ihrer jeweiligen Äxten wider und erstellt die gewünschte linkszeigte Schere.