Transformacja CSS3 nie działa

122

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.

html css

— shruti
źródło

2

Do Twojej wiadomości, IE obsługuje tę właściwość CSS3, potrzebujesz tylko przedrostka:-ms-transform:rotate(10deg);

— Joshua Pinter,

Możliwy duplikat transformacji CSS nie działa na elementach wbudowanych

— memy

2

Ponieważ nikt jeszcze o tym nie wspomniał, od 2016 roku upewnij się, że umieścisz nieprefikowaną wersję reguły CSS (np. transform: rotate(10deg);) Pod dowolną wersją z prefiksem, którą wybierzesz do obsługi.

— Maximillian Laumeister

301

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 .

— trzydzieści kropek
źródło

22

Kocham Cię! display: inline-blockPomogło.

— Królik Bugs

2

Pomocne byłoby wyjaśnienie :)

— scitronboy,

56

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.

— phihag
źródło

U mnie zadziałało idealnie, dziękuję! Użyłem go na <span> & copy </span>, aby stworzyć symbol copyleft.

— Elisabeth,

@Elisabeth To doskonała aplikacja. Zwróć uwagę, że odniesienia do encji muszą być zakończone średnikiem (tak jak w <span>©</span>), chociaż większość przeglądarek renderuje w obie strony.

— phihag

Inna uwaga: jeśli stosujesz transformację dla stanu interakcji (np., :hoverLub :active), musisz zastosować inline-blockdo elementu w jego stanie domyślnym, np a { display: inline-block; } a:active { transform: translateY(0.125em); }.. Samo zastosowanie inline-blockdo stanu interakcji nie działa. Przynajmniej w Chrome - działa dobrze w Firefoksie.

— Paul d'Aoust

1

dziękuję za zwrócenie uwagi na fakt, że -webkit-transformto nie działa w przypadku elementów wbudowanych. Utknąłem na tym wcześniej.

— pbojinov

@phihag Świetna uwaga, uratowałeś mi trochę wyrywania włosów! Warto zauważyć, że może to spowodować zniknięcie elementów po zakończeniu animacji.

— texelate

21

_{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.

— Josh Crozier
źródło

0

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).

— Su '
źródło

-4

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

— pdj
źródło

1

Podczas moich dzisiejszych testów zauważyłem, że -webkit-transformrzeczywiście nie jest już potrzebny w Chrome. Jednak nadal było potrzebne w Safari 8.

— John Slegers,

Do czego służy -sand-transform? Krótkie wyszukiwanie w Google nic nie dało.

— Pete

google „CSS Sandpaper”, który jest odpowiedni do pytania i może ułatwić sprawę. jest to hack implementujący obsługę standardowej transformacji CSS dla starszych wersji IE

— Pedro Justo