css повернуть блок на 90 градусов

И добавим теперь на веб-страницу:
Что мы видим: ( : перемещается в горизонтальное положение ( :
Здорово, не так ли? -90deg означает поворот на 90%. У IE свои значения.

8 комментариев:

Алексей Куликов А куда этот код вставлять!? Как то, эта статья от профессионала к профессионалу! NMitra Есть немного. Это не сложно и если будите пробовать быстро разберётесь.


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 можно просмотреть по ссылке ниже.

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

Столкнулся с проблемой надо повернуть блок вертикально, когда поворачиваю этот блок, то его ширина не поворачивается и занимает всю область так как он был бы по горизонтали. Прикрепил картинку, чтоб было понятней. Буду очень благодарен за вашу помощь!

2 ответа 2

Ширина и не должна «поворачиваться».

К вашему коду можно добавить position: absolute;

Тогда оно займет независимую от других элементов позицию и будет занимать «нулевую ширину» внутри вашего кода. Далее можно добавить пробелы или пустой блок к вашему коду. там, где должен был находится повернутый элемент.

Оцените статью