与动画显示不正确的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>