html - 变换（旋转/翻译）更改我的文本的 z-index

Question

我想旋转单词的第一个字母。但是一旦它被旋转，它就会出现在其他所有元素之上（z-index），并且没有其他元素可以超过这个字母（但它们可以超过这个词的其余部分，即不旋转）。

.rotating-letter {
  float: left;
  transform: translate(0, .18em) rotate(-30deg);
}

<h1>
  <span className='rotating-letter'>H</span>
  <span>ello</span>
</h1> 

图像的左侧部分显示粉红色部分位于单词上方，但在右侧，您会看到 H 停留在顶部

如果我删除转换，其他元素可以回到我的字母之上。
我希望这是可以理解的！
非常感谢 ！

标签： htmlcss