Обертати та перекладати

Question 1

У мене виникають проблеми з обертанням і розташуванням рядка тексту. Зараз працює лише позиція. Поворот також працює, але лише якщо я вимкнув позиціонування.

CSS:

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

Html - це просто текст.

Question 2

Причина в тому, що ви двічі використовуєте властивість перетворення. Завдяки правилам 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 'mode-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 ";"