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

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