CSS "transform: rotate ()" affects the overall design with "position: absolute" (doesn't align properly)

Question

I am afraid that I do not know how to explain this at all, and I can show it. So I installed this script.

As you can see, the navigation menu is not where it should be. It should be installed exactly on the lower border of the head element and on the left border. That is, bottom: 0 and left: 0 . However, I set the rotation to -90degs, and it is obvious that absolute positioning in the nav element occurs before the rotation or, rather, from the original element, as if there was no rotation.

I tried using the :before and :after pseudo-elements to try to see if I could solve this problem. But I can not fully understand these pseudo-elements. In both cases, the rotation was bypassed. (Without 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 unusual.

And this is CSS (its parts that are relevant to this problem):

 #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 works: you can see it in the Fiddle project.

Hope someone out there can give me a hand.

---

PS . In addition, sometimes, and depending on the size of the text inside the <a> tags, it seems that the distance between the vertical elements in nav slightly increases, as if it were half a pixel, which means that the borders become fuzzy. You can see this in this other version with only four characters and a space in one of the <a> elements. I can’t understand why this would make a difference. However, it makes the menu look pretty bad when this happens!

Answer 1

This is because the nav element has a different width and height. By default, the element rotates in the center, so in the case of your nav corners of this block after rotation do not coincide. The solution to this problem is to set the transform-orgin , which moves the pivot point so that the lower left corners before and after the conversion are in the same place. In your case, this is transform-origin: 75px 75px; (works regardless of length <a> ).

Here is the violin

Unfortunately, this will not solve the problem for IE8, as these browsers do not support conversion and use their own rotation method.

Answer 2

The ul strip seems to be in your nav. Try fine tuning

nav ul {padding-left: 0; }

(Chrome dev-tools can help you find the missing last 1 or 2 pixels, helped me find the ul pad.)