Obróć i przetłumacz

Mam problemy z obracaniem i pozycjonowaniem wiersza tekstu. Teraz działa tylko pozycja. Obrót również działa, ale tylko wtedy, gdy wyłączę pozycjonowanie.

CSS:

#rotatedtext {
    transform-origin: left;
    transform: rotate(90deg);
    transform: translate(50%, 50%);
}

HTML to zwykły tekst.

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:

1. obrócić tekst o 90 stopni. Ok.
2. 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);

rotateOperacja odbywa się pierwszy, wówczas translate.

Zobacz: Kolejność transformacji CSS3 ma znaczenie: najpierw operacja z prawej strony

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

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