Powodem jest dwukrotne użycie właściwości transform. Ze względu na reguły CSS z kaskadą wygrywa ostatnia deklaracja, jeśli mają taką samą specyfikę. Tak jest, ponieważ obie deklaracje transformacji znajdują się w tym samym zestawie reguł.
To, co robi, to:
- obrócić tekst o 90 stopni. Ok.
- przetłumacz 50% na 50%. Ok, to jest ta sama właściwość, co krok pierwszy, więc wykonaj ten krok i zignoruj krok 1.
Zobacz http://jsfiddle.net/Lx76Y/ i otwórz go w debugerze, aby zobaczyć nadpisanie pierwszej deklaracji
Ponieważ translator nadpisuje rotację, zamiast tego należy połączyć je w tej samej deklaracji: http://jsfiddle.net/Lx76Y/1/
Aby to zrobić, użyj listy przekształceń oddzielonych spacjami:
#rotatedtext {
transform-origin: left;
transform: translate(50%, 50%) rotate(90deg) ;
}
Pamiętaj, że są one określone w łańcuchu, więc translacja jest stosowana najpierw, a potem rotacja.
Nie mogę komentować, więc oto idzie. O @David Storey odpowiedz.
Uważaj na „kolejność wykonywania” w łańcuchach CSS3! Kolejność jest od prawej do lewej, a nie od lewej do prawej.
transformation: translate(0,10%) rotate(25deg);
rotate
Operacja odbywa się pierwszy, wówczastranslate
.Zobacz: Kolejność transformacji CSS3 ma znaczenie: najpierw operacja z prawej strony
źródło
Nie ma takiej potrzeby, ponieważ możesz użyć css „writing-mode” z wartościami „vertical-lr” lub „vertical-rl”.
.item { writing-mode: vertical-rl; }
źródło
Coś, co można przeoczyć: w moim projekcie tworzenia łańcuchów okazuje się, że lista oddzielona spacjami również wymaga na końcu średnika oddzielonego spacjami.
Innymi słowy, to nie działa:
transform: translate(50%, 50%) rotate(90deg);
ale to robi:
transform: translate(50%, 50%) rotate(90deg) ; //has a space before ";"
źródło