CSS "transform: rotate ()" влияет на общий дизайн с помощью "position: absolute" (не выравнивается должным образом)

это происходит потому, что nav элемента имеет различную ширину и высоту. По умолчанию элемент вращается по центру, поэтому в случае вашего nav углы этого блока после вращения не совпадают. Решение этой проблемы состоит в том, чтобы установить transform-orgin свойство, которое будет перемещать точку вращения так, чтобы левые нижние углы до и после преобразования находились в одном месте. В вашем случае это transform-origin: 75px 75px; (работает независимо от <a> длина.)

вот скрипка

к сожалению, это не решит проблему для IE8 - поскольку эти браузеры не поддерживают преобразование и используют свой собственный способ поворота вещей.