CSS3-Transformation funktioniert nicht

Ich versuche, meine Menüelemente durch Drehen um 10 Grad zu transformieren. Mein CSS funktioniert in Firefox, aber ich konnte den Effekt in Chrome und Safari nicht replizieren. Ich weiß, dass der IE diese CSS3-Eigenschaft nicht unterstützt, daher ist dies kein Problem.

Ich habe folgendes CSS verwendet:

li a {
   -webkit-transform:rotate(10deg);
   -moz-transform:rotate(10deg);
   -o-transform:rotate(10deg); 
}

Könnte jemand bitte vorschlagen, wo ich falsch liege?

Vielen Dank.

Dies ist nur eine fundierte Vermutung, ohne den Rest Ihres HTML / CSS zu sehen:

Haben Sie sich beworben display: blockoder display: inline-blockbei li a? Wenn nicht, probieren Sie es aus.

Versuchen Sie andernfalls, listattdessen die CSS3-Transformationsregeln anzuwenden .

In Webkit-basierten Browsern (Safari und Chrome) -webkit-transform wird dies bei Inline-Elementen ignoriert. . Stellen Sie ein display: inline-block;, damit es funktioniert . Zu Demonstrations- / Testzwecken möchten Sie möglicherweise auch einen negativen Winkel verwenden oder transformation-originden Text aus dem sichtbaren Bereich herausdrehen.

_{Da niemand auf relevante Dokumentation verwies:}

CSS Transforms Module Level 1 - Terminologie - Transformierbares Element

Ein transformierbares Element ist ein Element in einer dieser Kategorien:

• Ein Element, dessen Layout vom CSS-Box-Modell gesteuert wird, das entweder ein Element auf Block- oder atomarer Inline-Ebene ist , oder dessen Anzeigeeigenschaft in Tabellenzeile, Tabellenzeilengruppe, Tabellenkopfgruppe und Tabellenfußzeile berechnet wird -Gruppe, Tabellenzelle oder Tabellenbeschriftung
• Ein Element im SVG-Namespace, das nicht vom CSS-Box-Modell gesteuert wird und dessen Attribute transform, 'patternTransform' oder gradientTransform aufweisen.

In Ihrem Fall sind die <a>Elemente inlinestandardmäßig.

Wenn Sie den displayWert der Eigenschaft so inline-blockändern, dass die Elemente als atomare Elemente auf Inline-Ebene dargestellt werden , werden die Elemente per Definition "transformierbar" .

li a {
   display: inline-block;
   -webkit-transform: rotate(10deg);
   -moz-transform: rotate(10deg);
   -o-transform: rotate(10deg); 
   transform: rotate(10deg);
}

Wie oben erwähnt, scheint dies nur in -webkitbasierten Browsern zuzutreffen, da es unabhängig davon in IE / FF zu funktionieren scheint.

Versuchen Sie speziell, nur die Links zu drehen? Weil es auf den LI-Tags gut zu funktionieren scheint.

Laut Snook- Transformationen müssen die betroffenen Elemente blockiert werden. Er hat dort auch Code, damit dieser IE mithilfe von Filtern funktioniert, wenn Sie ihn hinzufügen möchten (obwohl es anscheinend einige Einschränkungen bei den Werten gibt).

-webkit-transform wird nicht mehr benötigt

ms unterstützen bereits Rotation ( -ms-transform: rotate(-10deg);)

Versuche dies:

li a {
   ...

    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -sand-transform: rotate(10deg);
    display: block;
    position: fixed;
    }