web-dev-qa-db-fra.com

Retourner / inverser / mettre en miroir du texte en utilisant uniquement CSS

J'ai fait une recherche sur Google et voici ma réponse

<!--[if IE]>
<style>
    .mirror {
        filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
    }
</style>
<![endif]--> 
<style>
.mirror {
    display:block; 
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform:matrix(-1, 0, 0, 1, 0, 0);
}
</style>
<div class="mirror">testing</div>

Le seul problème ici est que le centre de la mise en miroir n'est pas le centre de l'objet, donc nous avons peut-être besoin d'un peu de javascript pour déplacer l'objet où nous le voulons.

htmlcsswebkitmirroring
54
TiansHUo

Votre code est correct mais il existe un moyen plus simple de le faire:

img.flip {
  -moz-transform:    scaleX(-1); /* Gecko */
  -o-transform:      scaleX(-1); /* Opera */
  -webkit-transform: scaleX(-1); /* Webkit */
  transform:         scaleX(-1); /* Standard */

  filter: FlipH;                 /* IE 6/7/8 */
}

Je pense que cela résout votre problème de mise en miroir centré.

Comme indiqué, vous devrez définir l'élément pour utiliser un affichage de bloc, de bloc en ligne, etc.

112
hitautodestruct

pour mettre en miroir utiliser transform: scaleX(-1); pour retourner utiliser transform: scaleX(-1) rotate(180deg);

3
Yehuda Schwartz