带有旋转文本的垂直导航

Posted 2023-04-13

【中文标题】带有旋转文本的垂直导航

【英文标题】：vertical navigation with rotated text

【发布时间】：2014-07-15 06:15:57

【问题描述】：

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

【问题讨论】：

我会旋转外部div，你可以试试这个演示jsbin.com/ravuduni/2

这看起来很完美，感谢您帮助我。我只是想问一些我不知道的事情。这个属性做什么 translateX(-100%) 以及宽度是多少：100vh；请将此作为您的答案，我会接受。

【参考方案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 会像这样水平放置：

我们需要围绕transform-origin: left top 指定的点left - top 旋转它-90deg（逆时针方向）。旋转后，所有的.main-nav 都会像这样消失：

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

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

Jsbin Demo.

【讨论】：

感谢您的帮助以及您花时间以非常详细的方式解释这些事情。像你这样的人只有少数。作为一个新手，我从你那里学到了很多，我相信我会随着时间的推移而进步。谢谢

@fahad.kazi 不客气，对于downvote，下次只需尝试在添加了一些演示链接的问题中发布您的代码。在本站投反对票是很正常的事情，它只是帮助提问者下次更好地提问，这并不意味着人们讨厌或不喜欢提问者，而是 对他/她提出的问题 :)

是的，我认为因为我没有发布我的代码，所以我被否决了。我会记住这一点。谢谢:)

感谢您提到转换属性中顺序的重要性 :)