javascript - 垂直居中对齐导航

Question

我正在尝试在屏幕右侧制作导航标题并为其添加动画。顶部标题运行良好，但尝试旋转标题会弄乱 javascript。

动画是:第一个

并转化为

我遇到的问题是像这样将下一个标题垂直放置在页面左侧的中间

到目前为止，我处于这个阶段并卡住了:

这是我的 javascript 代码:

<div class="navbarProjects">
            <div class="container">
                <h1 class="spread">Projects</h1>
            </div>
        </div>

        <div class="navbarAbout">
            <h1 class="spread">About</h1> 
        </div>
        <script>
            var spread = document.getElementsByClassName('spread');
                [].forEach.call(spread, function(el) {
                  // replace the content width divs
                  el.innerHTML = '<span>' + el.innerText.split('').join('</span><span>') + '</span>'
                  // custom :hover
                  el.onmouseenter = function(e) {
                    var childern = e.target.childNodes
                    var width = e.target.offsetWidth / childern.length 
                    for (var i = 0, child; child = childern[i]; i++) child.style.minWidth = width + 'px'
                  }
                  // remove custom style again
                  el.onmouseleave = function(e) {
                    var childern = e.target.childNodes
                    for (var i = 0, child; child = childern[i]; i++) child.style.minWidth = '0'
                  }
                })
        </script>
.navbarProjects {
    text-align: center;
    top: 2%;
    font-size: 32px;  
}

.navbarAbout {
    font-size: 32px;
    padding-top: 0;
    transform: rotate(90deg);
}



.spread  {
    text-align:center;

}

.spread span {
    display: inline-block;
    transition: all .5s ease;
    text-align:center;
    min-width: 0;
}

Answer 1

这是我为解决您的问题而提出的 CSS:

我使用了在这里找到的类:http://spotlifefilms.com/

参见:https://jsfiddle.net/p8eqxpce/3/

.navbarFounder, .navbarServices, .navbarProjects, .navbarAbout {
    position: fixed;
    padding: 0px;
    margin: 0px;
    height: 70px;
}

.navbarFounder, .navbarServices {
    width: 100vh;
    top: 50%;
}
.navbarProjects, .navbarAbout {
    width: 100vw;
    right: 50%;
}

.navbarFounder {
    left: 0px;
    transform:
        rotate(270deg)
        translate(35px, calc(-50vh + 35px));
}
.navbarServices {
    right: 0px;
    transform:
        rotate(90deg)
        translate(-35px, calc(-50vh + 35px));
}
.navbarProjects {
    bottom: 0px;
    transform:
        rotate(180deg)
        translateX(-50vw);
}
.navbarAbout {
    right: 50%;
    transform:
        rotate(0deg)
        translateX(50vw);
}