voltear/inversor/Mirroring texto mediante CSS solamente

hice algunas google y aquí está mi respuestavoltear/inversor/Mirroring texto mediante CSS solamente

<!--[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 la duplicación no es el centro del objeto, así que tal vez necesitamos un poco de javascript para mover el objeto donde lo queremos.

Fuente

2010-08-08 TiansHUo

Use 'transformar-origen controlado para controlar el punto sobre el que se aplica la transformación. –

+12

˙pɐdǝʇou sʍopuᴉʍ ʇsnɾ ƃuᴉsn ʇᴉ ʎɐldsᴉp puɐ ǝlᴉɟ ʇxǝʇ ɐ sɐ ʇᴉ ǝʌɐs uɐɔ noʎ ʇɐɥʇ ǝƃɐʇuɐʌpɐ ǝɥʇ sɐɥ oslɐ ʇxǝʇ uᴉɐlԀ ˙sᴉɥʇ ǝʞᴉl sɐǝɹɐ XOQ-ʇuǝɯɯoɔ ƃuᴉpnlɔuᴉ 'pǝʍollɐ sᴉ ʇxǝʇ uᴉɐld ǝɹǝɥʍ ǝɹǝɥʍʎuɐ ʇᴉ ǝʇsɐd puɐ ʎdoɔ uɐɔ noʎ ʇɐɥʇ sᴉ ɥɔɐoɹddɐ sᴉɥʇ ɟo ǝƃɐʇuɐʌpɐ ǝɥ┴ ˙ʇɔǝɟɟǝ ɹoɹɹᴉɯ * * ʇɔǝɟɹǝd ɥʇᴉʍ sɹǝʇɔɐɹɐɥɔ ʎɐldsᴉp uɐɔ noʎ 'ɥƃnoɥʇ ** ** ʇdᴉɹɔsɐʌɐs ǝlʇʇᴉl ɐ ʇsnɾ ɥʇᴉM – Pacerier

Resistí acomodando mi portátil boca abajo para leer el comentario anterior. Esto ... tomó un tiempo. – Kay

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

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 su problema reflejo centrada.

Fuente

2010-08-08 14:27:54 hitautodestruct

+12

Tenga en cuenta que tendrá que utilizar un bloque o un elemento inline-block: http://codepen.io/igalst/pen/fKhmp – IgalSt

voltear/inversor/Mirroring texto mediante CSS solamente

Respuesta

Cuestiones relacionadas