html - una - Voltear/Invertir/Duplicar texto usando solo CSS

invertir texto css

Question

Hice algunos google y aquí está mi respuesta

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

El único problema aquí es que el centro de duplicación no es el centro del objeto, por lo que tal vez necesitemos algún javascript para mover el objeto a donde lo deseemos.

Answer 1

Su código es correcto, pero hay una manera más fácil de hacerlo:

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 */
}

Creo que esto resuelve tu problema de reflejo centrado.