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

Question

Ich fürchte, ich weiß nicht, wie ich es so gut erklären kann, wie ich es zeigen kann. Also ich habe this Fiddle.

Wie Sie sehen können, ist das Nav-Menü nicht da, 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 -90deg und es ist offensichtlich, dass die absolute Positionierung auf dem nav Element vor der Rotation oder vielleicht eher auf dem ursprünglichen Element geschieht, als ob die Rotation nicht existierte.

Ich habe versucht mit :before und :after Pseudo-Elemente zu versuchen und 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 Drehung, das nav Element positioniert offensichtlich selbst, wo es sein sollte.)

Dies ist im Grunde der 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> 

Nichts Besonderes.

Und das ist die CSS (die Teile davon, die zu diesem Thema wichtig):

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

Wie es funktioniert: you can see this in the Fiddle project.

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

---

P. S. Manchmal, und abhängig von der Größe des Textes innerhalb der <a> Tags, scheint es, der Abstand zwischen den vertikalen Elementen in leicht erhöht, als ob in einem halben Pixel, was bedeutet, dass die Grenzen verschwommen werden. You can see this in this other version 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 die Speisekarte ziemlich schlecht aussehen, wenn es passiert!

Answer 1

Dies geschieht, weil das nav Element unterschiedliche Breite und Höhe aufweist. Standardmäßig wird ein Element um seinen Mittelpunkt gedreht, so dass im Falle Ihrer nav die Ecken dieses Blocks nach der Drehung nicht übereinstimmen. Die Lösung für dieses Problem besteht darin, die Eigenschaft transform-orgin festzulegen, die den Rotationspunkt so verschiebt, dass die unteren linken Ecken vor und nach der Transformation an derselben Stelle liegen. In Ihrem Fall ist es transform-origin: 75px 75px; (arbeitet unabhängig von der <a> Länge).

Here's the fiddle

Leider wird es nicht das Problem für IE8- wie diese Browser nicht löst Transformation unterstützen und nutzen, um ihre eigene Art, die Dinge zu drehen.

Answer 2

Es scheint die Polsterung der ul in Ihrem Nav zu sein. Versuchen Sie eine Feinabstimmung

nav ul {padding-left: 0; }

(Chrome Entwickler-Tools können Ihnen helfen, die fehlenden letzten 1 oder 2 Pixel zu finden, die mir geholfen, die ul Polsterung zu finden.)