CSS"transform:rotate()"影响整体设计"position:absolute"(未正确对齐)

Question

我担心我不知道如何解释它以及我可以展示它.所以我设置了这个小提琴.

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

它是如何工作的:你可以在Fiddle项目中看到这一点.

希望有人可以帮助我.

---

PS.此外,有时,并根据里面的文字大小<a>的标签,似乎在垂直件之间的距离nav是稍有增加,如果半个像素,这意味着边界变得模糊.你可以在另一个版本中看到这个,只有4个字符,其中一个<a>元素中有一个空格.无法理解为什么这会有所作为.但是,它会使菜单看起来很糟糕!

Answer 1

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

这是小提琴

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