我担心我无法很好地解释,但我可以给你展示。所以我建立了这个代码片段。
正如你所看到的,导航菜单不在它应该待的地方。它应该准确地设置在头元素的底部边界和左边界。即bottom:0
和left:0
。然而,我设置了-90度的旋转,显然在nav
元素上的绝对定位发生在旋转之前或者更多是在原始元素上,就好像旋转不存在一样。
我尝试使用:before
和:after
伪元素来解决它。但是我无法完全掌握这些伪元素。在两种情况下,旋转都被忽略了。(没有旋转时,nav
元素会自动定位在正确的位置。)
以下是基本代码:
<div id="head">
<div id="title">My Web</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Something Else</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
没有花哨的东西。
这是CSS代码(与此问题相关的部分):
#head {
position: relative;
}
nav {
position: absolute;
bottom: 0;
left: 0;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
transform: rotate(-90deg);
}
nav a {
display: inline-block;
padding: 0 9px;
}
它是如何工作的:您可以在Fiddle项目中查看。
希望有人能帮我一下。
P.S。此外,有时(取决于标签内文本的大小),nav
中竖直元素之间的距离似乎会略微增加,就像半个像素那样,这意味着边框变得模糊。您可以在另一个版本中看到这个问题,其中只有4个字符和一个元素中的空格。不明白为什么会有所差异。然而,当出现这种情况时,菜单看起来相当糟糕!
transform-origin
设置远离中心 (50% 50%
),我能够避免这种扭曲。实际上,我相信我可以概括地说,在元素(整体不那么麻烦)上旋转看起来更好,尽可能靠近角落设置它。 - QuestionerNo27