Положение текстов после поворота

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 
    } 

Answer 2

Попробуйте это: Установите ширину диапазона блока. И установите слева: [значение] соответственно.

HTML

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

Обновленный CSS

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; 
width:80px; 
transform:rotate(90deg); 
margin: 0; 
position:absolute; 
left: -3.4em; 
} 

Здесь работает Demo. Надеюсь, эта работа для вас.