Поворот текста. -webkit-transform.

[Atilla]

Поворачиваю текст на 90 градусов вот так:

<h1 style="-webkit-transform: rotate(90deg); display:inline-block;">Это текст</h1>

Но поворачивается текст вокруг центра, и получается какая-то фигня:

Было:

Стало:

Как повернуть текст так, чтобы левый верхний угол исходной совпадал с левым верхним уже повёрнутой:

?

[swetlana]

а никак, только спозиционировать.

Я в своё время баловалась с этими свойствами, они нормально в документации описаны.

Функционал у них более чем скромный.

[Atilla]

а как ещё можно текст вращать?

[swetlana]

А больше никак.

Ну ещё для мозиллы аналогичное свойство есть.

Но во-первых вряд ли удастся достичь кроссбраузерности, разве что во времена царствования IE12, Opera16, FF7 и Safari10.

Рассчитывать надо вообще на то, что это свойство у подавляющего большинства не сработает, и предусмотреть, чтобы и без поворота всё красиво было.

Ну а если заказчик, который видел такой эффект у себя дома в сафари, вдргу на работе в IE6 хочет тоже видеть, и разумным доводам не внемлет, то сажаем свою совесть под замок, накрываем плотной тряпкой, чтобы думала, что ночь, и спала, и не видела такого безобразия, и… картинкой.

[Atilla]

Похоже пока не наступило Царство Современного и Хорошего Браузера придётся заливать картинкой.

P.S. Как ни странно в ишачке поворот текста работал. Причём с самого 5.5... В первый раз проблема не в ИЕ...

[swetlana]

кстати, в ишачке много чего работает, только об этом мало кто знает

Мне тут недавно кое-кто пытался доказать, что в IE невозможно сделать фоновый градиент.

А глядя на мою работу (действующий сайт в этих ваших интернетах), где такое реализовано, утверждал, что я его обманываю и применяю для этого какие-то трюки

ну да… трюк называется filter:gradient

Просто вспомнилась забавная история в тему.

[Atilla]

Хе, если долго покопаться... Вобщем нашел такое:

-webkit-transform-origin:0 0;

И соответственно, -webkit-transform-origin/-moz-transform-origin/-o-transform-origin.

Задаёт относительно какой части вращать блок.

А в ИЕ вроде как writing-mode:tb-rl; нормально работает.

Так что возможно и получится...