CSS翻转菜单，动画显示不正确

Question

这可能看起来像是一个重复的问题，我很抱歉，但我无法解决这个问题，这让我很生气。它可能也是如此简单。

我有一个隐藏的菜单出现在另一个div的翻转上，虽然它表现得非常有趣。当我翻转菜单出现但它没有正确显示。我附上了一个小提琴和它在我的机器上出现的图像以及我希望它如何出现。

＆＃13;

＆＃13;

/** 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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

感谢任何帮助或建议：）

如果有人能告诉我为什么我的文字没有垂直显示，那就太棒了：）

Answer 1

只需将<span>代码更改为<p>代码，请参阅小提琴https://jsfiddle.net/DIRTY_SMITH/cvrhxm7p/12/

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