Obróć i przetłumacz

Mam problemy z obracaniem i pozycjonowaniem linijki tekstu. Teraz tylko pozycja działa. Rotacja 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.

Author: vsync, 2013-05-28
Source

4 answers

Powodem jest to, że używasz właściwości transform dwa razy. Ze względu na reguły CSS z kaskadą, ostatnia deklaracja wygrywa, jeśli mają taką samą specyficzność. Ponieważ obie deklaracje transform są w tym samym zestawie reguł, tak jest w tym przypadku.

To co robi to:

  1. Obróć tekst o 90 stopni. Ok.
  2. Tł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 debuggerze, aby zobaczyć nadpisaną pierwszą deklarację

Ponieważ translate nadpisuje rotate, musisz połączyć je w tej samej deklaracji: http://jsfiddle.net/Lx76Y/1/

Aby to zrobić, użyj oddzielonej spacjami listy przekształceń: 

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

Pamiętaj, że są one określone w łańcuchu, więc najpierw zostanie zastosowany translate, a następnie rotate.

 165
Author: David Storey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-01 01:31:23

Nie mogę komentować, więc zaczynamy. O @ David Storey odpowiedz.

Uważaj na "kolejność wykonania" w łańcuchach CSS3! Kolejność jest od prawej do lewej, a nie od lewej do prawej.

transformation: translate(0,10%) rotate(25deg);

Operacja rotate jest wykonywana najpierw, a następnie translate.

Zobacz: CSS3 transform order matters: rightmost operation first

 12
Author: darthRodolfo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-05-20 11:10:15

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: writing-mode

 4
Author: biojazzard,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-01 10:50:34

Coś, co może zostać pominięte: w moim projekcie łączenia łańcuchów okazuje się, że lista oddzielona spacjami również potrzebuje średnika oddzielonego spacjami na końcu.

Innymi słowy, to nie działa: 

transform: translate(50%, 50%) rotate(90deg);

Ale tak jest: 

transform: translate(50%, 50%) rotate(90deg) ; //has a space before ";"
 2
Author: Brian Coyle,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-13 21:00:00