Retournement/Inverting/texte en miroir à l'aide css seulement

je l'ai fait quelques recherches sur Google et voici ma réponseRetournement/Inverting/texte en miroir à l'aide css seulement

<!--[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 mise en miroir est le centre de l'objet, alors peut-être nous avons besoin javascript pour déplacer l'objet où nous le voulons.

Source

2010-08-08 TiansHUo

Utilisez 'transform-origin' pour contrôler le point auquel la transformation est appliquée. –

+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 resistuɐʌpɐ ǝɥ┴ ˙ʇɔǝɟɟǝ ɹoɹɹᴉɯ * ʇɔǝɟɹǝd * ɥʇᴉʍ sɹǝʇɔɐɹɐɥɔ ʎɐldsᴉp uɐɔ noʎ 'ɥƃnoɥʇ ** ʇdᴉɹɔsɐʌɐs ǝlʇʇᴉl ɐ ** ʇsnɾ ɥʇᴉM – Pacerier

J'ai résisté en renversant mon ordinateur portable pour lire le commentaire ci-dessus. Cela ... a pris un moment. – Kay

Votre code est correct, mais il y a un moyen plus facile 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 en miroir centré.

Source

2010-08-08 14:27:54 hitautodestruct

+12

Notez que vous devrez utiliser un bloc ou un élément inline-block: http://codepen.io/igalst/pen/fKhmp – IgalSt

Retournement/Inverting/texte en miroir à l'aide css seulement

Répondre

Questions connexes