Поворот и перевод

У меня возникают проблемы с вращением и позиционированием строки текста. Теперь это просто позиция, которая работает. Вращение также работает, но только если я отключу позиционирование.

CSS

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

html - это просто текст.

Ответы

Ответ 1

Причина в том, что вы дважды используете свойство transform. Из-за правил CSS с каскадом последнее объявление выигрывает, если они имеют одинаковую специфичность. Поскольку оба объявления преобразования находятся в одном наборе правил, это так.

Что он делает, так это:

  • поверните текст на 90 градусов. Хорошо.
  • перевести 50% на 50%. Хорошо, это то же свойство, что и на первом шаге, поэтому сделайте этот шаг и проигнорируйте шаг 1.

См. http://jsfiddle.net/Lx76Y/ и откройте его в отладчике, чтобы увидеть, как первое объявление было перезаписано

Поскольку перевод переписывает поворот, вы должны комбинировать их в одной и той же декларации: http://jsfiddle.net/Lx76Y/1/

Для этого вы используете разделительный список преобразований:

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

Помните, что они указаны в цепочке, поэтому сначала применяется перевод, а затем поворот после этого.

Ответ 2

Нет необходимости в этом, так как вы можете использовать css 'write-mode' со значениями vertical-lr 'или' vertical-rl 'по желанию.

.item {
  writing-mode: vertical-rl;
}

CSS: write-mode

Ответ 3

Я не могу прокомментировать, так вот. Ответ @David Storey.

Будьте осторожны с "порядком исполнения" в цепочках CSS3! Правило (справа) от (слева). Не слева направо.

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

Операция "поворот" выполняется сначала, чем операция "переводить" выполняется далее/секунда.

См: Вопросы порядка преобразования CSS3: первая правая операция

Ответ 4

Что-то, что может быть пропущено: в моем проекте цепочки получается, что в разделенном пространстве списке также требуется разделенная пробелом точка с запятой в конце.

Другими словами, это не работает:

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

но это делает:

transform: translate(50%, 50%) rotate(90deg) ; //has a space before ";"