CSS Flip Letter水平

Question

我想创建一个小项目，用户输入一个单词（最好是回文），然后翻转后半部分。就像好的ol＆＃39; ABBA logo但反过来。

我一直在读几页，但没有一个满足我的需要。我考虑过使用SVG的<text>元素，但我对此并不了解。

基本上，我的预期输出是这样的：

这只是一个狡猾的形象我掀起了它并不是一个很好的例子，因为B旋转180度可能看起来像一个水平翻转取决于字体。

我基本上要问的是，我用CSS和/或JavaScript实现的目标是什么？

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

支持多浏览器以及您可以以不同角度旋转文本..

Answer 3

试试这个。我认为只有CSS才能完成文本的转换。不需要JS。

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

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