Flipping/Inversione/Mirroring del testo con i css solo

Question

Ho fatto alcune ricerche con google ed ecco la mia risposta

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

L'unico problema qui è che il centro di mirroring non è il centro dell'oggetto, così forse abbiamo bisogno di un po ' di javascript per spostare l'oggetto in cui si desidera.

Answer 1

Il codice è corretto, ma c'è un modo più semplice per fare questo:

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

Penso che questo risolve il tuo centrato il mirroring del problema.

Come indicato, si dovrà impostare l'elemento di utilizzare uno schermo di blocco, inline-block, etc.

Answer 2

a specchio l'uso transform: scaleX(-1); per capovolgere l'uso transform: scaleX(-1) rotate(180deg);