CSS Flip Letter水平

Question

我想创建一个小项目,用户输入一个单词(最好是回文),然后翻转下半部分.就像好的' ABBA标志 ',但反之亦然.

我一直在读几页但没有一个满足我的需要.我想过使用SVG的<text>元素,但我不太了解它的一些事情.

基本上,我的预期输出将是这样的:

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

我基本上要问的是,我用CSS和/或JavaScript实现了什么？

Answer 1

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

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