css – 带有旋转文本的垂直导航

我正在尝试实现一个垂直导航菜单,其中包含链接,我已使用 css3将链接文本旋转到270度.我已经旋转了它,因为我希望文本自下而上.问题是当我添加填充顶部时,它的间距会变得不一致.你可以看到我的代码 here.我无法理解正在采取的不同空间.我也尝试给李一个高度,但它没有用.如果有人可以帮助我,请这是我的代码：

HTML：

<div class="main-nav">
      <ul class="nav">
        <li><a href="#">HOME</a></li>
        <li><a href="#">METHODOLGY</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">TEAM</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
 </div>

CSS：

.rotate{
    -webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);writing-mode:lr-tb}
html, body {
  min-height:100%;
  max-height:100%;
  height:100%;
  font-family:Oswald, sans-serif, Arial;
  font-size:14px;
  background:#fff
}
a {
  text-decoration:none
}
li {
  list-style:none
}
ul {
  padding:0;
  margin:0
}
.main-nav {
  width:45px;
  float:left;
  height:100%;
  position:fixed;
  background:#4c4c4c
}
ul.nav {
  width:21px;
  margin:0 auto
}
ul.nav li:first-child {
  padding-top:35px
}
ul.nav li {
  padding-top:124px
}
ul.nav li a {
  -webkit-transform:rotate(270deg);
  -moz-transform:rotate(270deg);
  -o-transform:rotate(270deg);
  writing-mode:lr-tb;
  float:left;
  width:21px;
  color:#fff
}

旋转每个元素或li元素将使我们遇到一些问题间距,完全按照我们想要的方式定位元素.我们应该构建导航菜单,使其水平传播,先看起来好,然后我们只需要旋转导航菜单的整个容器.这是更新的代码：

.main-nav {
  width:100vh;    
  height:45px;
  position:fixed;
  background:#4c4c4c;
  -webkit-transform-origin: left top;
  -webkit-transform:rotate(-90deg) translateX(-100%);
}
ul.nav li {    
  margin-right:20px;
  float:right;
  height:100%;
  line-height:45px;
}

菜单应该具有45px的固定高度(旋转后,它将是宽度).我们使用line-height：45px来垂直居中一个元素(旋转后,它将是水平的).起初,.main-nav将水平放置,如下所示：

我们需要围绕由transform-origin：left top指定的左上角旋转-90deg(逆时针).旋转后,所有.main-nav都将不在视图范围内：

所以我们需要将它平移到100％宽度的距离,但请注意我们不使用translateY,这似乎意味着垂直平移,因为旋转后,X轴变为垂直(不像以前那样水平),所以我们必须使用translateX(-100％)(正方向向上,在旋转之前向右).然后我们有：

它只是一个与CSS3中的转换相关的简单用例.对于vh单位,它是相对于视口高度的单位. 100vh表示视口高度的100％.我们必须使用100vh的宽度,因为旋转后,宽度变为高度.它应该填充视口的整个高度.但是,您可以通过px为宽度设置一些最小宽度,以限制宽度的最小值.这是因为当您调整窗口大小时,视口的高度可能会变小,因此宽度会相应缩小.另请注意,我们不得不使用float：left作为li元素,而是使用float：right,以便Home菜单首先从上到下出现,否则(使用float：left),Home菜单将出现在结尾(在底部).这里有一些先进的变换用法(对于新手)我们对变换属性使用多于1个变换,所有变换都由空格分隔,变换的顺序很重要.如旋转(-90deg)translateX(-100％)表示首先旋转-90deg,然后沿X轴平移-100％,而translateX(-100％)旋转(-90deg)则反转,这是完全不同的事情当然不会起作用(产生意想不到的结果).

Jsbin Demo.