如何在CSS中围绕自己的轴旋转单个字母？

Question

我正在尝试将单词的各个字母绕其自身的轴旋转。 如下面的示例所示，是否可以在不包装每个字母的情况下实现此目的？

.word:hover .letter {
  display: inline-block;
  transform: rotateY(-180deg);
}

<h1 class="word">
  <span class="letter">C</span>
  <span class="letter">H</span>
  <span class="letter">E</span>
  <span class="letter">E</span>
  <span class="letter">S</span>
  <span class="letter">E</span>
</h1>

Answer 1

您可以使用特定的类将要旋转的文本换行，并对其进行转换。

演示：

.rotated:hover
{
  display: inline-block; 
  transform: scale(-1, 1);
  direction:rtl;
  unicode-bidi:bidi-override;
}

<span class='rotated'>CHEESE</span>