web-dev-qa-db-ja.com

CSSのみを使用したテキストの反転/反転/ミラーリング

私はいくつかのグーグルをしました、そしてここに私の答えがあります

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

ここでの唯一の問題は、ミラーリングの中心がオブジェクトの中心ではないことです。したがって、オブジェクトを目的の場所に移動するためにJavaScriptが必要になる場合があります。

htmlcsswebkitmirroring
54
TiansHUo

コードは正しいですが、これを行う簡単な方法があります。

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

これで、中心のミラーリングの問題が解決すると思います。

前述のように、ブロック、インラインブロックなどの表示を使用するには、要素を設定する必要があります。

112
hitautodestruct

transform: scaleX(-1);をミラーリングするにはtransform: scaleX(-1) rotate(180deg);を使用するには反転します

3
Yehuda Schwartz