CSS "transform: rotate()" affecting overall design with "position: absolute" (not aligning properly)

Question

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!

Solution 1

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.

Solution 2

It seems to be the padding of the ul in your nav. Try to fine-tune

nav ul { padding-left: 0; }

(Chrome's dev-tools might help you to find the missing last 1 or 2 pixels, helped me to find the ul padding.)