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