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

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

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

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

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

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

要让您的元素完全可见，您需要将元素移离边缘或修改旋转点。

这是一个使用 transform-origin 的基本示例：

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;
}

<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>

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

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;
}

<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>

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

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;
}

<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>

更多信息：

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

Elements with transform rotate get partially hidden outside container

html

css

flexbox

css-transforms