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.