html - 旋转后文本的位置

Question

当我旋转一些跨度时，其中的文本没有水平对齐。 你可以看到下面的例子。 在这个例子中，我们有三个旋转的跨度，但我们有对齐问题。

body{
    padding-left:10px;
}
.bordered{
  border-left: 2px solid gray;
  position: relative;
  padding-top: 4em;
  padding-bottom: 4em;
  padding-left: 1em;
}
 .bordered>span{
    display: block;
    background-color: #ccc;
    padding: 0.34em;
    font-weight: 300;
    font-size: 0.8em;
    color: gray;
    position: absolute;
    -webkit-transform: rotate(90deg);
    margin: 0;
    left: -2em;
    top: ms(3);
  }

<section class="hexa-container">
    <section class="hexa-content bordered">
        <span>Services</span>
    </section>
</section>

<section class="hexa-container">
    <section class="hexa-content bordered">
        <span>Works</span>
    </section>
</section>

<section class="hexa-container">
    <section class="hexa-content bordered">
        <span>Blog</span>
    </section>
</section>

Answer 1

您可以使用 transform-origin 属性来设置旋转点，默认情况下它是中心，并且您的跨度文本长度不同，这就是对齐在旋转时受到干扰的原因。如果你从左下角旋转它，它应该可以工作。

下面是修改后的 CSS 和 here是演示链接

body{
    padding-left:10px;
}
.bordered{
  border-left: 2px solid gray;
  position: relative;
  padding-top: 4em;
  padding-bottom: 4em;
  padding-left: 1em;
}
 .bordered>span{
     -webkit-transform: rotate(90deg);
     -webkit-transform-origin: 0% 0%;
    display: block;
    background-color: #ccc;
    padding: 0.34em;
    font-weight: 300;
    font-size: 0.8em;
    color: gray;
    position: absolute;      
    left: -1px;
    top: ms(3);
    margin-left:10px
  }