Pouvez-vous utiliser les CSS pour inverser le texte ?

Question

Est-il possible d'utiliser les CSS/CSS3 pour mettre le texte en miroir ?

Plus précisément, j'ai ce char de ciseaux "✂" ( ✂ ) que j'aimerais afficher en pointant vers la gauche et non vers la droite.

Answer 1

Vous pouvez utiliser des transformations CSS pour y parvenir. Un retournement horizontal impliquerait de mettre à l'échelle le div comme ceci :

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

Et un retournement vertical impliquerait de mettre à l'échelle le div comme ceci :

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

---

DEMO :

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

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

Answer 2

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

Les deux paramètres sont l'axe X et l'axe Y. L'axe -1 sera un miroir, mais vous pouvez le mettre à l'échelle de votre choix en fonction de vos besoins. A l'envers et en arrière, ce serait (-1, -1) .

Si vous êtes intéressé par la meilleure option disponible pour la prise en charge des navigateurs croisés en 2011, voir ma réponse plus ancienne .

Answer 3

Un vrai miroir :

.mirror{
    display: inline-block; 
    font-size: 30px;

    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

<span class='mirror'>Mirror Text<span>

Answer 4

J'ai bricolé cette solution en parcourant l'Internet, y compris les sites suivants

• Réponses de Stack Overflow,
• Articles de MSDN,
• http://css-tricks.com/almanac/properties/t/transform/ ,
• http://caniuse.com/#search=transform ,
• http://browserhacks.com/ y
• http://www.useragentman.com/IETransformsTranslator/ .

Cette solution semble fonctionner dans tous les navigateurs, y compris IE6+, en utilisant les éléments suivants scale(-1,1) (un miroir approprié) et des filter / -ms-filter si nécessaire (IE6-8) :

/* Cross-browser mirroring of content. Note that CSS pre-processors
  like Less cough on the media hack. 

  Microsoft recommends using BasicImage as a more efficent/faster form of
  mirroring, instead of FlipH or some kind of Matrix scaling/transform.
  @see http://msdn.microsoft.com/en-us/library/ms532972%28v=vs.85%29.aspx
  @see http://msdn.microsoft.com/en-us/library/ms532992%28v=vs.85%29.aspx
*/

/* IE8 only via hack: necessary because IE9+ will also interpret -ms-filter,
  and mirroring something that's already mirrored results in no net change! */
@media \0screen {
  .mirror {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(mirror=1)";
  }
}
.mirror {
  /* IE6 and 7 via hack */
  *filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
  /* Standards browsers, including IE9+ */
  -moz-transform: scale(-1,1);
  -ms-transform: scale(-1,1);
  -o-transform: scale(-1,1); /* Op 11.5 only */
  -webkit-transform: scale(-1,1);
  transform: scale(-1,1);
}

Answer 5

Pour la compatibilité entre navigateurs, créez cette classe

.mirror-icon:before {
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

Et ajoutez-la à votre classe d'icônes, c'est à dire

<i class="icon-search mirror-icon"></i>

pour obtenir une icône de recherche avec la poignée à gauche