CSS для поворота текста в IE

Question

У меня есть текст внутри элемента списка (<li>), и я хочу повернуть его на 270 градусов. В FireFox, Safari, Chrome и Opera мы нашли прямые методы, но в случае IE прямой поддержки нет. Тем не менее, есть некоторые фильтры, такие как matrix и BasicImage: я пробовал их, но я никуда не попал.

Например, я делаю что-то вроде этого:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Вращается только первый символ всех элементов списка

Answer 1

Я предполагаю здесь, но это может быть из-за того, что вы допустили только ширину, достаточную для каждого <li>, чтобы отображался только первый или два символа. Он отображается правильно без поворота, потому что текст должным образом выходит за пределы ширины <li>. Я сталкиваюсь с подобной проблемой, когда IE будет поворачивать только текст, видимый по ширине контейнера.

Если вы можете увеличить ширину каждого <li>, не мешая вашему макету, сделайте это и посмотрите, поможет ли это.

Answer 2

См:

Поворот элемента (преобразования CSS)

CSS3 представил ряд возможностей преобразования и анимации, которые, как полагают некоторые, неуместны в CSS. Тем не менее, есть способ имитировать ротацию элементов в Internet Explorer, хотя и ограниченным образом.

Синтакс

Чтобы повернуть элемент на 180 градусов (то есть повернуть его вертикально), вот синтаксис CSS3:

#rotate {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
}

Чтобы создать точно такой же поворот в Internet Explorer, вы используете собственный фильтр:

#rotate {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

Значение для поворота может быть 1, 2, 3 или 4. Эти числа представляют 90, 180, 270 или 360 градусов вращения соответственно.