使用 css/sass 的 x 轴倾斜文本答案

【问题标题】：Tilted text for x-axis using css/sass使用 css/sass 的 x 轴倾斜文本
【发布时间】：2018-02-27 19:45:30
【问题描述】：

如何在 x 轴上倾斜文本，如图所示。我尝试了变换，但无法倾斜它。

我有这样的跨度内的文本：

<span className="o-display-month">{value.Date}</span>

【问题讨论】：

【解决方案1】：

元素必须不是内联的。然后你可以使用负值transform:rotate(-XXdeg);进行变换@

.times{list-style:none;padding:0}
.times li{
  display:inline-block;
  margin-right:1em;
  transform:rotate(-40deg);
}

<ul class="times">
  <li>1 pm</li>
  <li>2 pm</li>
  <li>3 pm</li>
  <li>4 pm</li>
  <li>5 pm</li>
  <li>6 pm</li>
  <li>7 pm</li>
  <li>8 pm</li>
</ul>

【讨论】：

哇..酷！我没有想到负值。谢谢。
@HemaNandagopal 请记住，-40deg 与 320deg 相同

【解决方案2】：

您可以像这样使用 css 属性转换：transform: rotate(30deg) 还要考虑您需要将 inline-block 属性分配给您的跨度标签

【讨论】：

【解决方案3】：

你可以让 span display:inline-block 然后旋转它..它会工作

.o-display-month{
  display: inline-block;
    transform: rotate(-45deg);
}

【讨论】：

【解决方案4】：

由于 span 是内联元素，transform 属性不适用于内联元素。您必须将显示属性更改为 inline-block 或 block。那么你可以使用旋转属性。

.rotated {
  display: inline-block;
  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
}

【讨论】：