Html 具有“transform rotate”的元素部分隐藏在容器外部

我不确定我的代码中是否有一些问题，或者我可能遗漏了什么。 我的目标是使导航栏处于垂直固定位置，并旋转两个列表菜单：

• 其中一个我称之为“navMain”（Logo、proyects、contact）
• 另一个是“navSocial”（instagram、facebook、behance）

一旦我把navMain放在顶部，把navSocial放在底部，并放在容器的中央，这些导航的一部分就不在屏幕上了，我不知道如何解决这个问题

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

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

正文{
保证金：0；
}
标题{
背景：红色；
显示器：flex；
证明内容：之间的空间；
柔性流：柱包裹；
对齐内容：居中对齐；
宽度：100px；
高度：100vh；
位置：固定；
}
标题ul{
背景：黄色；
显示器：flex；
列表样式：无；
填充：0；
保证金：0；
变换：旋转（-90度）；
}
ullia{
文字装饰：无；
填充：0 10px；
光标：指针；
}

当您使用

transform

属性的

rotate（）

功能时，默认情况下，元素从其当前位置开始旋转，轴点位于框的中心

这意味着固定在容器顶部和底部边缘的导航元素，在给定

旋转（-90度）

时，将逆时针旋转四分之一圈，使每个元素的一半在容器边缘上消失

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

此行为由

变换原点

属性控制，该属性的初始值为

50%50%

（与

中心

相同或仅为

中心

），分别表示x轴和y轴偏移

若要使图元完全处于视图中，需要将图元移离边或修改旋转点

下面是一个使用变换原点的基本示例：

正文{
保证金：0；
}
标题{
背景：红色；
显示器：flex；
证明内容：之间的空间；
柔性流：柱包裹；
对齐内容：居中对齐；
宽度：100px；
高度：100vh；
位置：固定；
}
标题ul{
显示器：flex；
列表样式：无；
填充：0；
保证金：0；
变换：旋转（-90度）；
}
标题：第一个孩子{
变换原点：100%330%；
}
标题ul：最后一个孩子{
转化起点：0%-200%；
}
ullia{
文字装饰：无；
填充：0 10px；
光标：指针；
}