如何对角放置文本，但水平放置字母？

Question

我需要这样做： example

例如，我需要在屏幕对角线上放置一个 h1，但字母必须保持水平。

我试过关闭 span 和 letter-spacing++ 之间的每个字母，然后是 transform: translateY++，但这并不能说服我，因为我认为这个解决方案会给我带来太多麻烦为了让它保持完全响应，这是我的主要需求之一。

我也尝试过：

<h1>
 <span>E</span>
 <span>D</span>
 <span>C</span>
 <span>B</span>
 <span>A</span>
</h1>
h1{white-space:pre}
<--And then added padding-left to every single span.-->

但我认为在这种情况下，Google 将读取 EDCBA 而我需要编写 ABCDE...

Answer 1

这是解决第一种方法的方法：

在父级 h1 上使用变换 rotate() 以获得整体布局，然后对每个字母 (span) 应用单独的变换，旋转方向相反。

h1 {
  display: inline-block;
  transform: rotate(-45deg);
  transform-origin: top right;
  letter-spacing: 10px;
}

span {
  display: inline-block;
  transform: rotate(45deg);
}

<h1>
  <span>A</span>
  <span>B</span>
  <span>C</span>
  <span>D</span>
  <span>E</span>
</h1>

如何对角放置文本，但水平放置字母？

How to place the text diagonally, but with the letters horizontally?

html

css

transform