CSS“transform：rotate（）”影响具有“位置：绝对”的整体设计。 （不正确对齐） [英] CSS "transform: rotate()" affecting overall design with "position: absolute" (not aligning properly)

问题描述

我恐怕我不知道如何解释它，以及我可以显示它。因此，我已设置 这个小提琴。

正如你所看到的，导航菜单不是它应该在哪里。它应该精确地设置在head元素的下边框和左边框。也就是说 bottom：0 和 left：0 。然而，我设置旋转-90degs，很明显， nav 元素的绝对定位发生在旋转之前，或者可能在原始元素，如果

我尝试使用：之前和：之后伪元素尝试看看是否可以解决这个方式。但我不能完全掌握这些伪元素。在这两种情况下，都绕过了旋转。 （没有旋转， nav 元素显然位于它应该在的位置。）

这基本上是代码：

 < div id =head> 
< div id =title>我的网络< / div> 
< nav> 
< ul> 
< li>< a href =＃>首页< / a>< / li& 
< li>< a href =＃>关于我< / a>< / li> 
< li>< a href =＃> Something Else< / a>< / li> 
< li>< a href =＃>博客< / a>< / li> 
< li>< a href =＃>联系人< / 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> 元素。不明白为什么这会有所作为。

解决方案

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

这里是小提琴

不幸的是，它不会解决IE8的问题，因为那些浏览器不支持转换和使用自己的方式旋转东西。

I fear I quite don't know how to explain it as well as I can show it. So I've set up this Fiddle.

As you can see, the nav menu is not where it should be. It should be set exactly at the bottom border of the head element and to the left border. I.e. bottom: 0 and left: 0. However, I'm setting a rotation of -90degs and it is obvious that the absolute positioning on the nav element is happening before the rotation or perhaps rather on the original element as if the rotation didn't exist.

I've tried using :before and :after pseudo-elements to try and see if I could solve it that way. But I can't quite get the grasp of these pseudo-elements. In both cases, the rotation was bypassed. (Without the rotation, the nav element obviously positions itself where it should be.)

This is basically the code:

<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>

Nothing fancy.

And this is the CSS (the parts of it that matter to this issue):

#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;
}

How it's working: you can see this in the Fiddle project.

Hope someone out there can give me a hand.

---

P.S. Also, sometimes, and depending on the size of the text inside the <a> tags, it seems, the distance between the vertical elements in the nav is slightly increased, as if in half a pixel, meaning the borders become fuzzy. You can see this in this other version with just 4 more characters and a space in one of the <a> elements. Can't understand why this would make a difference. However, it makes the menu look rather bad when it happens!

解决方案

This happens because the nav element has different width and height. By default an element is rotated by its centre, so in case of your nav the corners of this block after rotation don't match. The solution to this problem is to set the transform-orgin property that will move the rotation point so that the bottom left corners before and after transformation are in the same place. In your case it's transform-origin: 75px 75px; (works independently of the <a> length).

Here's the fiddle

Unfortunately it won't solve the problem for IE8- as those browsers doesn't support transformation and use their own way of rotating things.

这篇关于CSS“transform：rotate（）”影响具有“位置：绝对”的整体设计。 （不正确对齐）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！