Question

我不确定我的代码中是否存在某些问题，或者我错过了某些内容。我的目标是一个垂直固定位置的导航栏，旋转了两个列表菜单：

其中一个我叫' navMain '（徽标，项目，联系方式）。
另一个是' navSocial '（Instagram，facebook，behance）。

一旦我 navMain 到达顶部， navSocial 到底部并以容器为中心，那些导航的一部分已经不在屏幕上了，我不知道如何解决这个问题。

我现在不确定，但如果将来我想添加更多链接到这些菜单，其中一部分也将被隐藏。

所以这就是我所做的。我会感激任何帮助。提前谢谢，对不起我的英语。

body {
  margin: 0;
}

header {
  background: red;
  display: flex;
  justify-content: space-between;
  flex-flow: column wrap;
  align-content: center;
  width: 100px;
  height: 100vh;
  position: fixed;
}


header ul {
  background: yellow;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  transform: rotate(-90deg);
}

ul li a {
  text-decoration: none;
  padding: 0 10px;
  cursor: pointer;
}

<header>
  <ul class="navMain" role="navigation">
    <li class="logo"><a href="#">logo</a></li>
    <li class="works"><a href="#">works</a></li>
    <li class="info"><a href="#">info</a></li>
  </ul>
  <ul class="navSocial" role="navigation">
    <li class="instagram"><a href="#">instagram</a></li>
    <li class="facebook"><a href="#">facebook</a></li>
    <li class="behance"><a href="#">behance</a></li>
  </ul>
</header>

Answer 1

当您使用rotate()属性的transform函数时，默认情况下，元素的旋转从其当前位置开始，其轴点位于框的中心。

这意味着当给定rotate(-90deg)时，固定到容器顶部和底部边缘的导航元素将逆时针旋转四分之一转，导致每个元素的一半消失在容器的边缘。

想象一下，有一根杆穿过元素的水平和垂直中心，元素围绕该点旋转。

此行为由 transform-origin 属性控制，其初始值为50% 50%（与center center相同或仅center），分别表示x轴和y轴偏移。

要使元素完全在视野中，您需要将元素移离边缘或修改旋转点。

以下是使用transform-origin的基本示例：

＆＃13;

body {
  margin: 0;
}

header {
  background: red;
  display: flex;
  justify-content: space-between;
  flex-flow: column wrap;
  align-content: center;
  width: 100px;
  height: 100vh;
  position: fixed;
}

header ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  transform: rotate(-90deg);
}

header ul:first-child {
  transform-origin: 100% 330%;
}

header ul:last-child {
  transform-origin: 0% -200%;
}

ul li a {
  text-decoration: none;
  padding: 0 10px;
  cursor: pointer;
}

＆＃13;

<header>
  <ul class="navMain" role="navigation">
    <li class="logo"><a href="#">logo</a></li>
    <li class="works"><a href="#">works</a></li>
    <li class="info"><a href="#">info</a></li>
  </ul>
  <ul class="navSocial" role="navigation">
    <li class="instagram"><a href="#">instagram</a></li>
    <li class="facebook"><a href="#">facebook</a></li>
    <li class="behance"><a href="#">behance</a></li>
  </ul>
</header>

＆＃13;

或者，使用justify-content: space-between而不是使用导航容器固定到顶部和底部边缘的justify-content: space-around，这会在导航和边缘之间留下一些空间。这可能足以防止旋转发生时溢出。

＆＃13;

body {
  margin: 0;
}

header {
  background: red;
  display: flex;
  justify-content: space-around; /* adjustment */
  flex-flow: column wrap;
  align-content: center;
  width: 100px;
  height: 100vh;
  position: fixed;
}

header ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  transform: rotate(-90deg);
}

ul li a {
  text-decoration: none;
  padding: 0 10px;
  cursor: pointer;
}

＆＃13;

<header>
  <ul class="navMain" role="navigation">
    <li class="logo"><a href="#">logo</a></li>
    <li class="works"><a href="#">works</a></li>
    <li class="info"><a href="#">info</a></li>
  </ul>
  <ul class="navSocial" role="navigation">
    <li class="instagram"><a href="#">instagram</a></li>
    <li class="facebook"><a href="#">facebook</a></li>
    <li class="behance"><a href="#">behance</a></li>
  </ul>
</header>

＆＃13;

或者，您可以使用边距将元素推离边缘：

＆＃13;

body {
  margin: 0;
}

header {
  background: red;
  display: flex;
  justify-content: space-between;
  flex-flow: column wrap;
  align-content: center;
  width: 100px;
  height: 100vh;
  position: fixed;
}

header ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  transform: rotate(-90deg);
}

header ul:first-child {
  margin-top: 100px;
}

header ul:last-child {
  margin-bottom: 100px;
}

ul li a {
  text-decoration: none;
  padding: 0 10px;
  cursor: pointer;
}

＆＃13;

<header>
  <ul class="navMain" role="navigation">
    <li class="logo"><a href="#">logo</a></li>
    <li class="works"><a href="#">works</a></li>
    <li class="info"><a href="#">info</a></li>
  </ul>
  <ul class="navSocial" role="navigation">
    <li class="instagram"><a href="#">instagram</a></li>
    <li class="facebook"><a href="#">facebook</a></li>
    <li class="behance"><a href="#">behance</a></li>
  </ul>
</header>

＆＃13;

更多信息：

具有变换旋转的元素部分隐藏在容器外部

1 个答案: