Question

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

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

Answer 1

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

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

我认为这解决了您的中心镜像问题。

如上所述，您必须将元素设置为使用块，内联块等的显示。

Answer 2

使用transform: scaleX(-1);镜像使用transform: scaleX(-1) rotate(180deg);

仅使用css翻转/反转/镜像文本

2 个答案: