Pouvez-vous utiliser CSS pour faire un miroir/retourner du texte?

-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 X axis, et Y axis, -1 sera un miroir, mais vous pouvez ajuster à n'importe quelle taille que vous voulez pour répondre à vos besoins. À l'envers et à l'envers serait (-1, -1) .

si vous êtes intéressé par la meilleure option disponible pour le soutien de navigateur croisé en 2011, Voir ma réponse plus ancienne .

Vrai miroir:

.mirror {
    display: block; 
    -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);
}

j'ai bricolé cette solution en récurant L'Internet y compris

• Stack Overflow answers,
• 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 approprié filter / -ms-filter propriétés lorsque 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 "151900920"screen {
  .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éer 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 l'ajouter à votre classe d'icône, i.e.

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

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

vous pouvez utiliser l'un ou l'autre

.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 position à absolute est très important! Si vous ne le paramétrez pas, vous devrez paramétrer display: inline-block;

vous pouvez utiliser "transformer" pour atteindre cet objectif. http://jsfiddle.net/aRcQ8 /

css:

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

il y a aussi le rotateY pour un vrai miroir:

transform: rotateY(180deg);

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

EDIT: Ne semble pas fonctionner sur l'Opéra... malheureusement. Mais ça marche très bien sur Firefox. Je suppose qu'il pourrait être nécessaire de dire implicitement que nous faisons une sorte de translate3d peut-être? Ou quelque chose comme ça.

il suffit d'ajouter une démo de travail pour horizontal et vertical Miroir flip.

.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 pour <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:inline-bloc ou bloc pour tourner. Donc, fondamentalement, la première réponse est la bonne. Mais 180, ça n'a pas marché.

juste un exemple de plus comment le personnage pourrait être retourné. Ajoutez des préfixes vendeur si vous en avez besoin, mais pour l'instant tous les navigateurs modernes prennent en charge la propriété transform. La seule exception est Opera si le mode Opera Mini est activé (~3% d'utilisateurs dans le monde).

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

Vous pouvez essayer de la boîte de réfléchir

box-reflect: 20px right;

voir propriété CSS box-reflect compatibilité? pour plus de détails