Главная -> CSS -> Как повернуть текст с помощью CSS transform

Как повернуть текст с помощью 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

Понравилась статья? Тогда подпишитесь на RSS, чтобы следить за обновлениями!

 

Продвижение сайтов в Республике Беларусь

Компания "Виста" предлагает продвижение сайтов в Республике Беларусь - первые 3 месяца бесплатно.