Кроссбраузерный поворот текста с помощью css3

В css3 есть полезное свойство для поворота текста на необходимый градус. Оно позволяет воплощать еще больше фантазий дизайнеров в жизнь

Пока что оно поддерживается только в лисе и вебкит-браузерах (ну и в ИЕ с помощью фильтров)
Для нормальных браузеров поворот текста осуществляется так

.class {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

Теперь в стили допишем фильтр для IE (в 6 тоже работает)

.class {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

Где:
- 1 – поворот на 90 градусов
- 2 – поворот на 180 градусов
- 3 – поворот на 270 градусов
- 4 – поворот на 360 градусов

Да, к сожалению в ИЕ возможен поворот только на эти 4 позиции. Также пока что такие манипуляции не поддерживает Opera

UPD добавление в стили для поддержки поворота в Opera

Сейчас узнал, что опера все-таки поддерживает это свойство, но тоже пока со своим префиксом. Так что пишем в стили следующее

.class {
	-webkit-transform: rotate(180deg); /* для safari и chrome браузеров */
	-moz-transform: rotate(180deg); /* для FF */
	-o-transform: rotate(180deg); /* для Opera */
	transform: rotate(180deg); /* для остальных браузеров поддерживающий поворот по-умолчанию */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* для ИЕ 6-8 */
}

Еще один вариант поворота текста в IE

Для IE можно применять свойство writing-mode.

Возможные значения

• lr-tb – Значение по умолчанию. Слева направо
• rl-tb – Справа налево
• tb-rl – Сверху вниз. В правом верхнем углу
• bt-rl – Сверху вниз. В правом нижнем углу
• tb-lr – Это значение работает только в IE8+, нужно использовать с префиксом -ms-writing-mode. Сверху вниз, в левом верхнем углу
• bt-lr – Сверху вниз. В левом нижнем углу
• lr-bt – Снизу вверх. Текст слева направо
• rl-bt – Снизу вверх. текст справа налево

p {
writing-mode: tb-rl;
	}

Примечание.
Internet Explorer 6.0 поддерживает только значения lr-tb и tb-rl.
Internet Explorer 7.0 поддерживает значения lr-tb, rl-tb, tb-rl, bt-rl.

Пример поворота текста с помощью css