Flipping/Invertierung/Mirroring Text mit CSS nur

ich einige googeln habe und hier ist meine AntwortFlipping/Invertierung/Mirroring Text mit CSS nur

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

Das einzige Problem ist hier, dass das Zentrum der Spiegelung ist nicht das Zentrum des Objekts, vielleicht brauchen wir einige Javascript, um das Objekt dorthin zu verschieben, wo wir es haben wollen.

Quelle

2010-08-08 TiansHUo

Verwenden Sie "transform-origin", um den Punkt zu steuern, auf den die Transformation angewendet wird. –

+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

ich meinen Laptop auf den Kopf widerstanden Umlegen des oben Kommentare zu lesen. Das ... hat eine Weile gedauert. – Kay

Ihr Code ist richtig, aber es ist ein einfacher Weg, dies zu tun:

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

Ich denke, das Ihr zentrierte Spiegelung Problem löst.

Quelle

2010-08-08 14:27:54 hitautodestruct

+12

Beachten Sie, dass Sie ein Block- oder Inline-Block-Element verwenden müssen: http://codepen.io/igalst/pen/fKhmp – IgalSt

Flipping/Invertierung/Mirroring Text mit CSS nur

Antwort

Verwandte Themen