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

86

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

CSS:

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

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

css webkit transform css-transforms Сера
источник

Ответы:

157

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

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

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

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

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

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

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

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

Дэвид Стори
источник
23
Я обнаружил, что очень важно помнить о цепочке. Сравните перевод с последующим вращением - jsfiddle.net/Mrjm8/3 - с вращением с последующим переводом - jsfiddle.net/Mrjm8/2
Люк
Как это работает при написании в HTML вместо CSS?
JakeTheSnake
2
@JakeTheSnake Это не так. CSS-преобразования - это функция CSS.
Stijn de Witt
2
Вау, спасибо. Вы должны выделить аспект цепочки :) это был ключевой элемент, о котором многие блоги и спецификации никогда не упоминают!
cgatian
@Luke Спасибо, что указали на это, порядок действительно имеет значение!
Ями Одымель,
12

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

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

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

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

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

Дарт Родс
источник
4

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

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

CSS: режим письма

биоджаззард
источник
2

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

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

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

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

transform: translate(50%, 50%) rotate(90deg) ; //has a space before ";"
Брайан Койл
источник