Transformacja CSS3 nie działa

Próbuję przekształcić moje pozycje menu, obracając je o 10 stopni. Mój CSS działa w Firefoksie, ale nie udało mi się odtworzyć efektu w Chrome i Safari. Wiem, że IE nie obsługuje tej właściwości CSS3, więc nie stanowi to problemu.

Użyłem następującego CSS:

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

Czy ktoś mógłby zasugerować, gdzie idę źle?

Dzięki.

To jest tylko zgadywanie bez oglądania reszty HTML / CSS:

Czy złożyłeś podanie display: blocklub display: inline-blockdo li a? Jeśli nie, spróbuj.

W przeciwnym razie spróbuj lizamiast tego zastosować reguły transformacji CSS3 .

W przeglądarkach opartych na webkitach (Safari i Chrome) -webkit-transform jest ignorowany w elementach wbudowanych. . Ustaw, display: inline-block;żeby to działało . W celach demonstracyjnych / testowych możesz również użyć kąta ujemnego lub transformation-originaby tekst nie był obracany poza widocznym obszarem.

_{Ponieważ nikt nie odniósł się do odpowiedniej dokumentacji:}

CSS Transforms Module Level 1 - Terminology - Transformable Element

Element podlegający transformacji to element należący do jednej z następujących kategorii:

• element, którego układ jest zarządzany przez model CSS, który jest albo blokowym, albo niepodzielnym elementem wbudowanym , albo którego właściwość wyświetlania jest obliczana jako table-row, table-row-group, table-header-group, table-footer -group, table-cell lub table-caption
• element w przestrzeni nazw SVG, który nie jest regulowany przez model CSS, który ma atrybuty transform, „patternTransform” lub gradientTransform.

W twoim przypadku <a>elementy są inlinedomyślne.

Zmiana wartości displaywłaściwości w celu inline-blockrenderowania elementów jako atomowych elementów liniowych , w związku z czym elementy z definicji stają się „transformowalne” .

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

Jak wspomniano powyżej, wydaje się to mieć zastosowanie tylko w -webkitprzeglądarkach opartych na systemie, ponieważ wydaje się, że działa w IE / FF niezależnie.

Czy konkretnie próbujesz obrócić tylko linki? Ponieważ robienie tego na tagach LI wydaje się działać dobrze.

Według Snooka, transformacje wymagają blokowania elementów, na które ma to wpływ. Ma tam również kod, dzięki któremu działa to dla IE przy użyciu filtrów, jeśli chcesz go dodać (chociaż wydaje się, że istnieją pewne ograniczenia dotyczące wartości).

-webkit-transform nie jest już potrzebne

ms już obsługuje rotację ( -ms-transform: rotate(-10deg);)

Spróbuj tego:

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