Le texte de retournement à l'aide de transformations CSS

Dans CSS, vous pouvez manipuler du texte et d'autres éléments à l'aide de transformations. Une transformation commune est la mise en miroir, également connue sous le nom de retournement. Cet effet peut être réalisé à l'aide d'une propriété CSS simple.

pour basculer le texte horizontalement (refléter sur l'axe vertical), utilisez la propriété CSS suivante:

- Moz-Transform: Scale (-1, 1);
- webkit-transform: échelle (-1, 1);
- o-transform: échelle (-1, 1);
- ms-transform: échelle (échelle ( -1, 1. &&&] De même, pour retourner le texte verticalement (le refléter à travers l'axe horizontal), utilisez cette propriété:

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

- webkit-transform : échelle (1, -1);

- o-transform: échelle (1, -1);

- ms-transform: échelle (1, -1);

transform: échelle (1, -1);

By applying this property, you scale the element vertically by -1, flipping it along the horizontal axis.

Example

Considérons le code HTML suivant, qui affiche un texte de texte et un caractère Scissors:

Demo Text ✂

Texte de démonstration ✂

Le code CSS ci-dessous applique les effets de retournement horizontaux et verticaux sur les plans correspondants:

span {affiche: en ligne -bloc; marge: 1em; }
. flip_h {transform: échelle (-1, 1); Couleur: rouge; }

. flip_v {transform: échelle (1, -1); Couleur: vert; }

Cela reflétera les caractères des ciseaux le long de leurs axes respectifs, créant les ciseaux de pointe de gauche souhaités.