與動畫顯示不正確的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>