Question

我正在尝试实现一个具有链接的垂直导航菜单，并且我已使用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
}

Answer 1

旋转每个a元素或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垂直居中a元素（旋转后，它将水平）。首先，.main-nav将水平放置：

enter image description here

我们需要在-90deg指定的点left - top周围旋转transform-origin: left top（逆时针）。旋转后，所有.main-nav都将不在视图范围内：

enter image description here

所以我们需要将其翻译为100% of width的距离，但请注意我们不使用translateY这似乎意味着将其垂直翻译，因为旋转后，X轴变为垂直（不像以前那样水平），所以我们必须使用translateX(-100%)（正方向向上，在旋转之前向右）。然后我们有：

enter image description here

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

Jsbin Demo.

带旋转文本的垂直导航

1 个答案:

Jsbin Demo.