CSS "transform: rotate()" 影响整体设计，使用 "position: absolute" 时无法正确对齐

Question

我担心我无法很好地解释，但我可以给你展示。所以我建立了这个代码片段。

正如你所看到的，导航菜单不在它应该待的地方。它应该准确地设置在头元素的底部边界和左边界。即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个字符和一个元素中的空格。不明白为什么会有所差异。然而，当出现这种情况时，菜单看起来相当糟糕！

- QuestionerNo27

Answer 1

这是因为nav元素的宽度和高度不同。默认情况下，元素按其中心旋转，因此在您的nav中，该块在旋转后的角落不匹配。解决此问题的方法是设置transform-origin属性，该属性将移动旋转点，使变换前后的左下角位于相同位置。在您的情况下，它是transform-origin: 75px 75px;（与<a>长度无关）。

这是一个例证

不幸的是，对于IE8及以下版本，它无法解决问题，因为这些浏览器不支持变换并使用自己的旋转方式。

- Mateusz Kocz

---

非常感谢你，Mateusz！这是一个很好的技巧。 - QuestionerNo27

顺便提一下，这也解决了我在 P.S. 中提到的问题。间隙是由于旋转造成的扭曲。我以为这是不可避免的，准备选择清晰度而非效果，但通过将 transform-origin 设置远离中心 (50% 50%)，我能够避免这种扭曲。实际上，我相信我可以概括地说，在元素（整体不那么麻烦）上旋转看起来更好，尽可能靠近角落设置它。 - QuestionerNo27

Answer 2

看起来是导航栏中ul的填充问题。尝试微调：

nav ul { padding-left: 0; }

（Chrome的开发者工具可以帮助您找到缺失的最后1或2个像素，对我有帮助找到了ul填充）

- Dennis

---

你好，Dennis。感谢你的答案。然而，使用 ul 填充对我没有任何作用。在 Fiddle 中改变了什么吗？ - QuestionerNo27

嗨，QuestionerNo27。抱歉，我刚用Chrome和Firefox测试了一下，它们都表现得像预期的那样。也许这篇文章可以帮到你：https://dev59.com/6lfUa4cB1Zd3GeqPLtbR 在你的示例中，偏移量为13px。 - Dennis

这里有一个我认为非常不错的CSS3动画概述：http://www.css3files.com/transform/。考虑到旋转发生在定位之后，所以你的导航会在“顶部”（底部；）覆盖其他元素，恐怕你需要通过设置适当的底部偏移量来解决这个问题。很抱歉我帮不上更多的忙。 - Dennis

完全不用谢，@Dennis，非常感谢你的时间！还有感谢你提供的参考资料。我一定会好好阅读的。 - QuestionerNo27