Comment puis-je utiliser CSS pour créer du texte en miroir ou inversé ?

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, on peut vouloir afficher le caractère ciseaux "✂" face à gauche plutôt qu'à 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: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-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 :

<code class="css">span{ display: inline-block; margin:1em; } 
.flip_H{ transform: scale(-1, 1); color:red; }
.flip_V{ transform: scale(1, -1); color:green; }</code>

<code class="html"><span class='flip_H'>Demo text &#9986;</span>
<span class='flip_V'>Demo text &#9986;</span></code>

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!