仅使用css翻转/反转/镜像文本 [英] Flipping/Inverting/Mirroring text using css only

问题描述

我做了一些Google搜索，这是我的回答

I did some googling and here's my answer

<!--[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来移动我们想要的对象。

The only problem here is that the center of mirroring is not the center of the object, so maybe we need some javascript to move the object where we want it.

推荐答案

您的代码是正确的，但是有一个更简单的方法：

Your code is correct but there is an easier way to do this:

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

镜像问题。

这篇关于仅使用css翻转/反转/镜像文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！