css поворот текста на 90

1. Поворот элемента средствами CSS 3
2. Выравнивание и направление текста средствами CSS 3
2. Пример поворота текста на 90 градусов и выравнивания текста CSS 3

Поворот элемента средствами CSS 3

Периодически web-дизайнеры сталкиваются с проблемой поворота какого-либо элемента. Благодаря средствам CSS 3 у этой задачи появилось довольно простое решение. Опять же, для кроссбраузерности нужно указать несколько свойств. Ниже приведён пример кода для поворота элемента на 90 градусов.

Код CSS

Выравнивание и направление текста средствами CSS 3

Теперь подробнее о свойстве writing-mode. Оно позволяет задать выравнивание (слева — справа) текста элемента и, что самое интересное, направление (горизонтальное или вертикальное)! Смотрим и пробуем:

lr-tb текст направлен слева направо.
rl-tb текст направлен справа налево.
tb-rl текст направлен вертикально и выравнивается по верхнему и правому краю.
bt-rl текст направлен вертикально и выравнивается по нижнему и правому краю.
tb-lr текст направлен вертикально и выравнивается по верхнему и левому краю.
bt-lr текст направлен вертикально и выравнивается по нижнему и левому краю.
На примере фразы текст идёт сюда можно рассмотреть действие CSS-свойств

Код CSS

Пример поворота текста на 90 градусов и выравнивания текста CSS 3

Вот готовый пример. Текст поворачиваем на 90 градусов. Для этого достаточно создать блок с идентификатором rotateText и задать ему свойства CSS.

Код HTML и CSS

Пример поворота элемента на 90 градусов на CSS можно просмотреть по ссылке ниже.

Демонстрация Скачать исходники
Спасибо за внимание! И удачи в разработке дизайна!

Internet Explorer		Chrome	Opera		Safari	Firefox		Android	iOS
9.0+	10.0+	5.0+	10.5+	12.10+	3.1+	3.5+	16.0+	2.1+	2.0+

Краткая информация

Значение по умолчанию	none
Наследуется	Нет
Применяется	К блочным и строчным элементам
Процентная запись	Неприменима
Ссылка на спецификацию

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.

Синтаксис

Значения

Функции трансформации

matrix

rotate

Поворот элемента на заданный угол относительно точки трансформации, задаваемой свойством transform-origin .

scale

Масштаб элемента по горизонтали и вертикали.

transform: scale(sx[, sy]);

Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб.

scaleX

Масштабирует элемент по горизонтали.

scaleY

Масштабирует элемент по вертикали.

skewX

Наклоняет элемент на заданный угол по вертикали.

skewY

Наклоняет элемент на заданный угол по горизонтали.

translate

Сдвигает элемент на заданное значение по горизонтали и вертикали.

transform: translate(tx[, ty])

translateX

Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.

translateY

Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.

HTML5 CSS3 IE Cr Op Sa Fx

В данном примере при наведении курсора на изображение оно поворачивается на 15 градусов по часовой стрелке.

Объектная модель

[window.]document.getElementBy >elementID «).style.transform

Браузеры

Internet Explorer 9 поддерживает нестандартное свойство -ms-transform .

Chrome, Safari, Andro >-webkit-transform .

Opera до версии 12.10 поддерживает нестандартное свойство -o-transform .

Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transform .

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

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

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

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

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

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

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

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

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

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

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