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

如您所见,导航菜单不在应有的位置.它应该精确地设置在头元素的底部边框和左边框.即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.

希望有人可以帮助我.

附：此外,有时,并且取决于< a>内的文本的大小.似乎,导航中垂直元素之间的距离略微增加,就像在半个像素中一样,意味着边界变得模糊. You can see this in this other version中仅有4个字符,并且在< a>之一中有空格.元素.无法理解为什么这会有所作为.但是,当它发生时,它会使菜单看起来很糟糕！