Utiliser CSS pour refléter le texte

Est-il possible de manipuler du texte à l'aide de CSS pour le faire apparaître en miroir ou inversé ? Par exemple, nous pouvons souhaiter afficher le caractère en ciseaux "✂" vers la gauche plutôt que vers la droite.

Les transformations CSS à la rescousse

Les transformations CSS permettent d'obtenir cet effet. Pour retourner le texte horizontalement, redimensionnez l'élément négativement sur l'axe des X :

``
-moz-transform: scale(-1, 1);
-webkit-transform: scale(- 1, 1);
-o-transform : échelle (-1, 1);
-ms-transform : échelle (-1, 1);
transform : échelle (-1, 1);
``

Pour retourner le texte verticalement, redimensionnez l'élément négativement sur l'axe y :

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

Démonstration

Voici comment utiliser ces transformations en pratique :

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

Demo text ✂
Demo text ✂

En ajoutant les classes respectives .flip_H ou .flip_V aux éléments, vous pouvez facilement retourner le texte horizontalement ou verticalement.