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

Question

我正在尝试实现具有链接的垂直导航菜单，并且我已使用 css3 将链接文本旋转到 270 度。我旋转了它，因为我希望文本从下到上。问题是当我添加填充顶部时，间距不一致。你可以看到我的代码here .我无法理解所占用的不同空间。我也试过给 li 一个高度，但没有用。请如果有人可以帮助我。这是我的代码:

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
}

Answer 1

旋转每个 a元素或 li element 会让我们遇到一些间距问题，完全按照我们想要的方式定位元素。我们应该构建导航菜单，使其水平展开，首先看起来不错，然后我们只需要旋转导航菜单的整个容器。这是更新的代码:

.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将 a 居中元素垂直(旋转后，它将是水平的)。起初 .main-nav将像这样水平放置:



我们需要旋转它 -90deg (逆时针)围绕点 left - top由 transform-origin: left top 指定.旋转后，所有 .main-nav将像这样看不见:



所以我们需要将它向下平移 100% of width ，但请注意，我们不使用 translateY这似乎意味着垂直平移它，因为旋转后，X轴变为 垂直 (不像以前那样水平)，所以我们必须使用 translateX(-100%) (正方向向上，旋转前向右)。然后我们有:



这只是一个与 CSS3 中的转换相关的简单用例。对于 vh单位，它是相对于视口(viewport)高度的单位。 100vh表示 100% of viewport's height .我们必须使用 100vh对于 width因为旋转后， width变成 height .它应该填满视口(viewport)的整个高度。但是你可以设置一些 min-width对于 width 按像素 限制 width的最小值。这是因为当您调整窗口大小时，视口(viewport)的高度可能会变小，因此 width会相应缩小。另请注意，不要使用 float:left对于 li元素，我们必须使用 float:right使 首页 菜单从上到下首先出现，否则(使用 float:left )， 首页 菜单将出现在最后(底部)。 transform 有一点高级用法在这里(对新手)，我们对 transform 使用超过 1 个变换属性，所有变换都用空格分隔，变换的顺序很重要。如 rotate(-90deg) translateX(-100%)表示旋转 -90deg首先，然后沿 X 轴平移 -100% , 而 translateX(-100%) rotate(-90deg)与此相反，这是完全不同的事情，当然不会起作用(产生意想不到的结果)。

Jsbin Demo.