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

Question

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

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

- TiansHUo

---

使用transform-origin来控制应用变换的点。 - ivan_pozdeev

请将文本翻译成中文。仅返回翻译后的文本：你是否曾经想过，即使是倒立着，世界也不会颠倒？事实上，这就像是我们生活中的某些方面一样，看似颠倒却又不失平衡。有时候，我们需要换个角度来看待问题，才能真正理解其中的道理。所以，无论何时，都要保持开放的心态，勇于尝试新的事物，才能在这个多元化的世界中获得成功。 - Pacerier

我抵制翻转我的笔记本电脑来阅读上面的评论。这个...花了一段时间。 - Kay

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

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

如注所述，你将需要将该元素设置为使用块、内联块等显示方式。

- hitautodestruct

---

请注意，您将需要使用块或内联块元素：http://codepen.io/igalst/pen/fKhmp - IgalSt

Answer 2

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

- Yehuda Schwartz