Question

我担心我不知道如何解释它以及我可以展示它。所以我设置了 this Fiddle.

如您所见，导航菜单不在应有的位置。它应该精确地设置在头元素的底部边框和左边框。即bottom: 0和left: 0。但是，我设置了-90degs的旋转，显然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;
}

工作原理： you can see this in the Fiddle project.

希望有人可以帮助我。

P.S 即可。此外，有时，根据<a>标记内文字的大小，似乎nav中的垂直元素之间的距离略微增加，就好像在半个像素中，意味着边界变得模糊。 You can see this in this other version 只有4个字符，其中一个<a>元素中有空格。无法理解为什么这会有所作为。但是，它会使菜单看起来很糟糕！

Answer 1

这是因为nav元素具有不同的宽度和高度。默认情况下，元素按其中心旋转，因此如果nav旋转后此块的角不匹配。此问题的解决方案是设置将移动旋转点的transform-orgin属性，以便变换前后的左下角位于同一位置。在您的情况下，它是transform-origin: 75px 75px;（独立于<a>长度工作）。

Here's the fiddle

不幸的是，它无法解决IE8的问题 - 因为那些浏览器不支持转换并使用自己的旋转方式。

Answer 2

它似乎是导航中ul的填充。尝试微调

nav ul {padding-left：0; }

（Chrome的开发工具可能会帮助您找到丢失的最后1或2个像素，帮助我找到ul填充。）

CSS“transform：rotate（）”影响整体设计“position：absolute”（未正确对齐）

2 个答案: