Как повернуть текст с помощью CSS transform

CSS transform позволяет поворачивать, наклонять, перемещать и масштабировать элементы с помощью CSS. Firefox, Opera и Webkit-браузеры, конечно же, поддерживают это свойство. Ну а всеми “любимый” IE, как говорится, опять sucks.

Подробную информацию вы найдете на www.w3.org, указанной выше, а сейчас немного теории и примеров.

Чтобы трансформировать блок, прописываем в CSS к нему следующие параметры:


.classname {
transform: свойство;
-webkit-transform: свойство;
-moz-transform: свойство;
}


Не забываем добавить к этому дивнику или спану display: block;.

Свойства можно использовать следующие ():

• translate(...);
• scale(...));
• rotate (...)
• skew(...)

В скобках записываем нужные  данные и в конечном варианте получаем следующий код:


.classname {
transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg) skew(15deg);
-webkit-transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg) skew(15deg);
-moz-transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg) skew(15deg);
display: block;
}


Для того, чтобы в IE тоже все корректно отображалось, используем фильтр DXImageTransform.Microsoft.Matrix.

Ну а дальше стилизуем как нравится:)

Вообще, все эти мытарства с IE6 в сотый раз начинают раздражать и хочется просто плюнуть на эту версию с высокой колокольни. В моем случае стресс обычно хорошо снимается просмотром книг, которые можно в ближайшем будущем либо скачать, либо купить в интернет-магазинах книг. Сейчас, например, читаю “iПрезентация. Уроки убеждения от лидера Apple Стива Джобса” - одна из немногих вещей, которая заслуживает внимания и потраченного времени. Более того - это то, что желательно иметь в печатном варианте и всегда держать у себя на рабочем столе. Особенно если по работе вам часто приходится выступать или делать доклады.

Кстати, если вы еще раз посмотрите урок “Как добавить тень с помощью CSS”, то увидите, что там мы уже использовали transform при создании тени. В сегодняшнем же демо для закрепления материала к блокам были добавлены внутренняя и внешняя тени.

Demo

Спасибо за добавление статьи в: