Повернуть и перевести

Question 1

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

CSS:

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

HTML - это простой текст.

Question 2

Причина в том, что вы дважды используете свойство 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) ;
}

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

Question 3

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

Будьте осторожны с «порядком выполнения» в цепочках CSS3! Порядок справа налево, а не слева направо.

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

rotateОперация выполняется первым, то translate.

См .: Порядок преобразования CSS3 имеет значение: сначала крайняя правая операция

Question 4

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

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

Question 5

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

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

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

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

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