Меню опрокидывания CSS с анимацией не отображается правильно

Question

Это может показаться повторным вопросом, и мне жаль, но я не могу это исправить, и это сводит меня с ума. вероятно, что-то слишком простое.

У меня есть скрытое меню, которое появляется при опрокидывании другого div, хотя оно ведет себя очень забавно. когда я переворачиваю меню, но оно отображается неправильно. я прикрепил скрипку и образы того, как она появляется на моей машине, и как я хочу, чтобы она появилась.

/** Layout */ 
 
.ts-layout { 
 
    
 
} 
 
.ts-header { 
 
    width: 100%; 
 
    height: 74px; 
 
    border-bottom: 1px solid #000; 
 
    position: fixed; 
 
    display: inline-block; 
 
    z-index: 999; 
 
    background-color: #fff; 
 
} 
 

 
.ts-menu-activator { 
 
    width: 25px; 
 
    height: 100%; 
 
    background-color: #2E2E2E; 
 
    color: #fff; 
 
    position: fixed; 
 
    display: inline-block; 
 
    padding-top: 75px; 
 
    border-left: 1px solid #fff; 
 

 
    transition: 1s; 
 
    transform: translateX(0); 
 
} 
 

 
.ts-menu-activator:hover { 
 
    transition: 1s; 
 
    transform: translateX(150px); 
 
} 
 

 
.ts-menu-activator:hover + .ts-menu-area { 
 
    transition: 1s; 
 
    transform: translateX(0); 
 
} 
 

 
.ts-menu-area { 
 
    height: 100%; 
 
    width: 150px; 
 
    background-color: #2E2E2E; 
 
    color: #fff; 
 
    position: fixed; 
 

 
    transform: translate(-150px); 
 
    transition: 1s; 
 
} 
 

 
.ts-view { 
 
    width: 100%; 
 
    height: 100%; 
 
    padding-left: 25px; 
 
    padding-top: 75px; 
 
} 
 

 
/** Styling helpers */ 
 
.no-select { 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
.vertical-text { 
 
    -webkit-transform: rotate(-90deg); 
 
    -moz-transform: rotate(-90deg); 
 
    -ms-transform: rotate(-90deg); 
 
    -o-transform: rotate(-90deg); 
 
    transform: rotate(-90deg); 
 
    /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */ 
 
    -webkit-transform-origin: 50% 50%; 
 
    -moz-transform-origin: 50% 50%; 
 
    -ms-transform-origin: 50% 50%; 
 
    -o-transform-origin: 50% 50%; 
 
    transform-origin: 50% 50%; 
 
    /* Should be unset in IE9+ I think. */ 
 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
 
}

<div class="ts-layout" ng-controller="app.views.layout.header as vm"> 
 
      <div class="ts-header"> 
 
       <div class="row"> 
 
        <div class="col-sm-6">Login Information</div> 
 
        <div class="col-sm-6">Controls</div> 
 
       </div> 
 
      </div> 
 

 
      <div class="ts-menu-activator"> 
 
       <span class="vertical-text">TESTING</span> 
 
      </div> 
 

 
      <div class="ts-menu-area"> 
 
       <i class="fa fa-home"></i> 
 
       &nbsp;Home 
 
      </div> 
 

 
      <div class="ts-view"> 
 
       <div class="container"> 
 
        <div class="angular-animation-container row"> 
 
         <div class="shuffle-animation col-xs-12" ui-view></div> 
 
        </div> 
 
       </div> 
 
      </div> 
 

 
     </div>

Любая помощь или предложения оценили :)

также, если кто-нибудь может сказать мне, почему мой текст не отображается вертикально, что было бы здорово :)

Answer 1

Просто измените <span> тега в <p> тег см скрипки https://jsfiddle.net/DIRTY_SMITH/cvrhxm7p/12/

<div class="ts-menu-activator"> 
<p class="vertical-text">TESTING</p> 
</div>