javascript - JavaScript水平翻转文本

我想更改网页的方向，可以使用如下所示的CSS方法进行更改：

.flip {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
}

并将类翻转添加到主体部分，如下所示：

    <body class="flip">

如您所知，页面将完全水平翻转，问题是页面中的文本，我们无法阅读，我正在寻找一种解决方案，使用JavaScript来取消对页面中仅文本的翻转。我的意思是只有文本会恢复正常。

无论如何，有没有使用JavaScript来仅翻转页面中的文本？

非常感谢您在此问题上的帮助。

提前致谢

最佳答案

您可以简单地使用CSS取消翻转文本。

.flip {
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  -ms-filter: fliph;
  /*IE*/
  filter: fliph;
  /*IE*/
  border: 3px dashed red;
}
.flip>p {
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  -ms-filter: fliph;
  /*IE*/
  filter: fliph;
}

<main class="flip">
  <p>FLIPPING? NO!</p>
</main>

关于javascript - JavaScript水平翻转文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40800453/