Obróć i przetłumacz

86

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.

Sera
źródło

Odpowiedzi:

157

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.

David Storey
źródło
23
Odkryłem, że bardzo ważne jest, aby o tym pamiętać. Porównaj tłumaczenie, po którym następuje rotacja - jsfiddle.net/Mrjm8/3 - z rotacją, po której następuje tłumaczenie - jsfiddle.net/Mrjm8/2
Luke
Jak to działa, gdy jest napisane w HTML, zamiast CSS?
JakeTheSnake
2
@JakeTheSnake It does not. Transformacje CSS to funkcja CSS.
Stijn de Witt
2
Wow dziękuję. Powinieneś odważyć się na aspekt łańcuchowy :) to był kluczowy element, o którym wiele blogów i specyfikacji nigdy nie wspomina!
cgatian
@Luke Dzięki za zwrócenie uwagi, kolejność naprawdę ma znaczenie!
Yami Odymel
12

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

darthRods
źródło
4

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

CSS: tryb pisania

biojazzard
źródło
2

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 ";"
Brian Coyle
źródło