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

【问题标题】：How to place the text diagonally, but with the letters horizontally?如何将文本对角放置，但字母水平放置？
【发布时间】：2021-09-16 08:30:32
【问题描述】：

我需要这样做： 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...

【问题讨论】：

标签： html css transform

【解决方案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>

【讨论】：

完美！事实上，这是我的第一个想法，如果我没记错的话，问题是在那次尝试中我没有将 inline-block 显示放到 span 中，我放弃了它。谢谢你的帮助:)