Le retournement/Inverser/mise en Miroir de texte à l'aide de css

J'ai fait quelques recherches sur google et voici ma réponse

<!--[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 symétrie n'est pas le centre de l'objet, peut-être que nous avons besoin d'un peu de javascript pour déplacer l'objet où nous le voulons.

  • Utilisation transform-origin pour contrôler le point sur lequel la transformation est appliquée.
  • 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ɐʌɐſ ǝlʇʇᴉl ɐ ʇsnɾ ɥʇᴉM
  • J'ai résisté, en feuilletant mon ordinateur portable à l'envers vers le bas pour lire le commentaire ci-dessus. Cette (...) a pris un certain temps.
InformationsquelleAutor |
  1. 110

    Votre code est correct, mais il y a un moyen plus simple pour cela:

    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 centrée sur la mise en miroir de problème.

    Comme indiqué, vous devrez définir l'élément à utiliser un affichage de block, inline-block, etc.

    InformationsquelleAutor
  2. 2

    à miroir utilisation transform: scaleX(-1); de flip utilisation transform: scaleX(-1) rotate(180deg);

    InformationsquelleAutor