Comment puis-je retourner du texte horizontalement et verticalement à l'aide de transformations CSS ?

Inversion du texte à l'aide de transformations CSS

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

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

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

Cette propriété met à l'échelle l'élément horizontalement de -1, le retournant efficacement le long de l'axe vertical.

De même, pour retourner le texte verticalement (le refléter sur l'axe horizontal), utilisez cette propriété :

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

En appliquant cette propriété, vous redimensionnez l'élément verticalement de -1, en le retournant le long de l'axe horizontal.

Example

Considérez le code HTML suivant, qui affiche du texte et un caractère en forme de ciseaux :

Texte de démonstration ✂
Texte de démonstration ✂

Le code CSS ci-dessous applique les effets de retournement horizontal et vertical aux travées correspondantes :

span{ display: inline-block; marge : 1em ; }
.flip_H{ transform: scale(-1, 1); couleur : rouge ; }
.flip_V{ transform: scale(1, -1); couleur : vert ; >

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

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!