Привет. Сегодня рассмотрим как можно осуществить поворот текста CSS и больше ничего. Такая задача может возникнуть (у нас неоднократно возникала), и решается она на чистом CSS3, без картинок и Javascript.

Поворот текста css

Задача: поворот текста CSS

Итак, перед нами стоит задача, повернуть текст на N градусов без применения дополнительных средств, только на CSS.

Решение: поворот текста CSS

Решение кроется во встроенной в CSS директиве transform. Которая поворочивает по сути любой блок, в котором её указывают. Работает в 60% браузеров с использованием префикса (-webkit, -moz и т.д.), а в 40% — без использования. Ниже приводим таблицу совместимости с браузерами, практически везде работает, как видите.

Поворот текста css

Итак, рассмотрим поворот текста css на примере кода.

Текст, который мы повернем

И осуществим поворот текста CSS:

.rotatable{
-webkit-transform: rotate(-45deg); //Chrome, Safari
-moz-transform: rotate(-45deg); //Firefox
-o-transform: rotate(-45deg); //Opera
-ms-transform: rotate(-45deg); //IE
transform: rotate(-45deg); //браузеры без префексов
}

Этот код будет осуществлять поворот текста CSS. Результат можно посмотреть на jsFiddle:

Как видите, текст успешно повернулся, по сути, с помощью этого кода можно повернуть любой блок на CSS.
В качестве параметра передаётся значение угла поворота (положительное или отрицательное) и указатель, что это угол «deg».

Также директиву transform можно использовать с другими функциями (не только rotate).Также можно растянуть scale, растянуть по горизонтали (scaleX) или вертикали (scaleY), или исказить в проекции (skew), и по аналогии skewX и skewY. Кроме того, можно сдвинуть по вертикали или по горизонтали или и вертикали и горизонтали на заданное число пискелей (translate, translateX, translateY), или вообще задать матрицу преобразований, в которой будут заданы все возможные искажения блока только при помощи CSS.

Надеюсь, эта статья помогла вам решить поставленную перед вами задачу осуществить поворот текста CSS. Если остались вопросы задавайте в комментарии или в зелёную кнопку «Задать вопрос специалистам».

Хотите узнать больше разных решений, добро пожаловать на мини-курсы по веб-разработке: http://webformyself.com/minikurs/5techniques/