Блог

Как я могу избежать перекрытия элементов li при повороте, как показано ниже в CSS?

 .nav-tabs-left{
    list-style-type: none;
    float: left;
    margin-left: 0px;
}
.nav-tabs-left li{
    transform: rotate(90deg);
}  

 <ul class="nav-tabs-left" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab"><span>Settings</span></a></li>
</ul>  

вывод

Вместо использования преобразований CSS вам следует изучить writing-mode .

Свойство writing-mode определяет, располагаются ли строки текста горизонтально или вертикально, и направление, в котором продвигаются блоки.

IE8 не поддерживает 2D-преобразования, тогда как существует частичная поддержка режима записи.

Глобальная поддержка writing-mode составляет 91,85%, и это действительно хорошо.

 .section-title {
    writing-mode: vertical-lr;
}
  

Исходный код — режим записи CSS

Демонстрация Codepen

Добавьте display: inline-block; и определение ширины .nav-tabs-left li , например

 .nav-tabs-left li {
  display: inline-block;
  width: 20px;
  transform: rotate(90deg);
}
  

Вот codepen: http://codepen.io/anon/pen/pEAEZJ