Pouvez-vous utiliser CSS pour mettre en miroir / retourner du texte?

Est-il possible d'utiliser CSS / CSS3 pour refléter du texte?

Plus précisément, j'ai ce ciseaux char “✂” ( ✂) que je voudrais afficher pointant vers la gauche et non vers la droite.

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

DÉMO:

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>

-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, -1 sera un miroir, mais vous pouvez adapter l'échelle à n'importe quelle taille selon vos besoins. À l'envers et en arrière serait (-1, -1).

Si vous êtes intéressé par la meilleure option disponible pour la prise en charge multi-navigateurs en 2011, consultez mon ancienne réponse .

Véritable 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>

Vous pouvez utiliser soit

.your-class{ 
      position:absolute; 
      -moz-transform: scaleX(-1); 
      -o-transform: scaleX(-1); 
      -webkit-transform: scaleX(-1); 
      transform: scaleX(-1); 
      filter: FlipH;  
}

ou

 .your-class{ 
  position:absolute;
  transform: rotate(360deg) scaleX(-1);
}

Notez que le réglage positionsur absoluteest très important! Si vous ne le définissez pas, vous devrez définir display: inline-block;

J'ai bricolé cette solution en parcourant Internet, y compris

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

Cette solution semble fonctionner dans tous les navigateurs, y compris IE6 +, en utilisant scale(-1,1)(un miroir approprié) et les propriétés filter/ appropriées -ms-filterlorsque cela est 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);
}

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

vous pouvez utiliser «transformer» pour y parvenir. http://jsfiddle.net/aRcQ8/

css:

-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);

Il y a aussi le rotateYpour un vrai miroir:

transform: rotateY(180deg);

Ce qui est peut-être encore plus clair et compréhensible.

EDIT: ne semble pas fonctionner sur Opera si… malheureusement. Mais cela fonctionne bien sur Firefox. Je suppose qu'il pourrait être nécessaire de dire implicitement que nous faisons une sorte de translate3dpeut-être? Ou quelque chose comme ça.

Il suffit d'ajouter une démo de travail pour un retournement de miroir horizontal et vertical.

.horizontal-flip {
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.vertical-flip {
  -moz-transform: scale(1, -1);
  -webkit-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

<div class="horizontal-flip">
  Hello, World
  <input type="text">
</div>
<hr>
<div class="vertical-flip">
  Hello, World
  <input type="text">
</div>

c'est ce qui a fonctionné pour moi <span class="navigation-pipe">&gt;</span>

display:inline-block;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);

juste besoin d'affichage: bloc en ligne ou bloc à tourner. Donc, fondamentalement, la première réponse est bonne. Mais -180 n'a pas fonctionné.

Vous pouvez essayer la réflexion sur boîte

box-reflect: 20px right;

voir la compatibilité des boîtes de propriétés CSS? pour plus de détails

Juste un exemple de plus sur la façon dont le personnage pourrait être inversé. Ajoutez des préfixes de fournisseur si vous en avez besoin, mais pour l'instant tous les navigateurs modernes prennent en charge la propriété de transformation non préfixée. La seule exception est Opera si le mode Opera Mini est activé (~ 3% des utilisateurs mondiaux).

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Text rotation</title>
  <style type="text/css" media="screen">
    .scissors {
      display: inline-block;
      font-size: 50px;
      color: red;
    }
    .original {
      color: initial;
    }
    .flipped {
      transform: rotateZ(180deg);
    }
    .upward {
      transform: rotateZ(-90deg);
    }
    .downward {
      transform: rotateZ(90deg);
    }
  </style>
  
</head>
<body>
  <ul>
    <li>Original: <span class="scissors original">&#9986;</span></li>
    <li>Flipped: <span class="scissors flipped">&#9986;</span></li>
    <li>Upward: <span class="scissors upward">&#9986;</span></li>
    <li>Downward: <span class="scissors downward">&#9986;</span></li>
  </ul>
</body>
</html>

direction: rtl; est probablement ce que vous recherchez.

Cela fonctionne très bien avec des icônes de police comme «icônes de trait s7» et «police génial» :

.mirror {
  display: inline-block;
  transform: scaleX(-1);
}

Et puis sur l'élément cible:

<button>
  <span class="s7-back mirror"></span>
  <span>Next</span>
</button>