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

Question

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

我在这个范围内的文字是这样的：

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

Answer 1

元素必须不内联。然后，您可以使用旋转进行变换，使用负值transform:rotate(-XXdeg);

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以像这样使用css属性转换：transform: rotate(30deg) 还要考虑您需要将内联块属性设置为span标记

Answer 3

你可以进行跨度显示：内联块然后旋转它..它将起作用

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

Answer 4

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

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