CSS "transform: rotate ()" beeinflusst das gesamte Design mit "position: absolute" (nicht richtig ausgerichtet)

Ich fürchte, ich weiß nicht, wie ich es so gut erklären soll, wie ich es zeigen kann. Also habe ich diese Geige eingerichtet

Wie Sie sehen, ist das Navigationsmenü nicht dort, wo es sein sollte. Es sollte genau am unteren Rand des Kopfelements und am linken Rand eingestellt werden. I.e. bottom: 0 und left: 0 . Allerdings setze ich eine Rotation von -90degs und es ist offensichtlich, dass die absolute Positionierung auf dem Element nav vor der Rotation oder vielleicht eher auf dem ursprünglichen Element stattfindet, als ob die Rotation nicht existierte.

Ich habe versucht mit :before und :after Pseudo-Elementen zu versuchen und zu sehen, ob ich es so lösen könnte. Aber ich kann diese Pseudoelemente nicht ganz begreifen. In beiden Fällen wurde die Rotation umgangen. (Ohne die Rotation positioniert sich das nav -Element offensichtlich dort, wo es sein sollte.)

Dies ist im Grunde der Code:

Nichts Besonderes.

Und das ist das CSS (die Teile, die für dieses Problem wichtig sind):

Wie es funktioniert: Sie können dies im Fiddle-Projekt sehen.

Hoffe jemand da draußen kann mir eine Hand geben.

P.S . Manchmal und abhängig von der Größe des Texts innerhalb der <a> -Tags scheint der Abstand zwischen den vertikalen Elementen in nav geringfügig zu sein, wie bei einem halben Pixel , was bedeutet, dass die Grenzen unscharf werden. Sie können dies in dieser anderen Version sehen mit nur 4 weiteren Zeichen und einem Leerzeichen in einem der <a> Elemente Ich kann nicht verstehen, warum dies einen Unterschied machen würde. Es macht jedoch das Menü ziemlich schlecht aussehen, wenn es passiert!