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

一尘不染

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

css

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

.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);

}


<!--[if IE]>

<style>

    .mirror {

        filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);

    }

</style>

<![endif]-->



<div class="mirror">testing</div>

这里唯一的问题是镜像的中心不是对象的中心，因此也许我们需要一些JavaScript才能将对象移动到所需位置。

阅读 787

2020-05-16

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

我认为这可以解决您居中的镜像问题。

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

2020-05-16