Les transformations CSS peuvent-elles retourner le texte horizontalement et verticalement ?

Inversion du texte à l'aide de CSS

Est-il possible de manipuler du texte à l'aide de CSS pour refléter ou inverser son orientation ? Cette question se pose lorsque vous rencontrez des scénarios dans lesquels vous devez afficher des caractères ou du texte spécifiques dans une direction inversée, comme retourner un caractère en ciseaux de droite à gauche.

Réponse :

Oui, les transformations CSS offrent la possibilité de refléter ou de retourner du texte. Pour y parvenir, vous pouvez utiliser la fonction scale().

Retournement horizontal :

Un retournement horizontal inverse la direction du texte sur l'axe des x, ce qui rend il semble qu'il pointe dans la direction opposée. Pour y parvenir, redimensionnez l'élément horizontalement d'un facteur de -1 :

<code class="css">-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);</code>

Retournement vertical :

De même, un retournement vertical retourne le texte le long de l'y -axe, inversant sa direction verticale. Pour ce faire, redimensionnez l'élément verticalement de -1 :

<code class="css">-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);</code>

Exemple :

Voici un exemple utilisant HTML et CSS pour démontrer l'effet de retournement :

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

<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>

En utilisant ce CSS, le caractère ciseaux dans la première travée (flip_H) sera inversé horizontalement, face à gauche, tandis que le caractère dans la deuxième travée (flip_V) sera inversé verticalement, face vers le haut. vers le bas.

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!