水平翻转CSS字母

Question

我希望创建一个小项目，用户输入一个单词（最好是回文），然后将第二部分翻转。就像经典的ABBA logo一样，但方向相反。

我已经阅读了很多页面，但没有满足我的需求。我考虑使用SVG的<text>元素，但有些地方我不太理解。

基本上，我的预期输出应该类似于这样：

这只是我匆忙制作的一张图片，不是很好的例子，因为一个旋转180度的B在不同字体下可能会看起来像水平翻转的B。我的问题是，使用CSS和/或JavaScript可以实现我想要的效果吗？

- Spedwards

---

transform: rotateY(180度); - tom10271

@easwee 关闭了？真的吗？这太明显和令人困惑的愚蠢了；请移除关闭状态。因为提出了一个好的、聪明的和非常具体的问题，我给你点赞。 - John

@John 别傻了 - 这是一个如何问题，没有尝试过代码来实现所需行为，并且没有提供 MCVE。http://stackoverflow.com/help/mcve - easwee

@easwee 这种态度让我删除了很多问题，并在自己的博客上发表了它们：并不是每个人都知道该使用什么，这并不本质上使那个人变得懒惰。 - John

@John 对我来说，那真的是无关紧要的信息。在SO上，“给我代码”这样的问题是不受欢迎的。我会在这里停止辩论 - 如果你认为这个问题应该被开放，你可以在元社区投诉。 - easwee

Answer 1

.fliph {
  display: inline-block;
  transform: scaleX(-1); /* Or also:   rotateY(180deg) */
}

A<span class="fliph">B</span>BA

- Roko C. Buljan

---

在提出这个问题之前，我完全不知道为什么所有的解决方案都不起作用。然后我意识到我忘记了display:inline-block。谢谢！ - Spedwards

@Spedwards 是的，一个元素需要除了 inline 以外的其他属性才能应用变换。不客气，祝你编码愉快。 - Roko C. Buljan

耶。完全脑抽哈哈。干杯 - Spedwards

Answer 2

.rotate {
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
  -o-transform:rotateY(180deg);
  -ms-transform:rotateY(180deg);
  unicode-bidi:bidi-override;
  direction:rtl;
  display: inline-block;
}

<b>A<div class = "rotate">B</div>BA</b>

多浏览器支持，您可以将文本旋转不同角度。

- Abdul Jabbar

Answer 3

try this. i think transformation of text done by only CSS. no need JS.

.flip {
  display: inline-block;
  transform: rotateY(180deg);
}

<span>ABCD</span><span class="flip">ABCD</span>

- Darshak Shekhda