аватар |

Статьи / CSS /

Направление и поворот элемента или текста CSS 3


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

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


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

Код CSS

#rotate_element {
  -webkit-transform: rotate(90deg); // разворот элемента для разных бразуеров
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}


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


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

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

Код CSS

.text {
writing-mode: lr-tb; /* текст направлен слева направо */
}

.text1 {
writing-mode: rb-tb; /* текст направлен справа налево */
}


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


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

Код HTML и CSS

<html>
<head>

 <style>
 #rotateText {
     -webkit-transform: rotate(90deg); /* разворот текста для разных браузеров */
     -moz-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     -o-transform: rotate(90deg);
     transform: rotate(90deg);
     writing-mode: tb-rl; 
     width: 200px; /* ширина блока */
     height: 200px; /* высота блока */
 }
 </style>

</head>
<body>

 <div id="rotateText">Вертикально направленный текст</div>

</body>
</html>

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

Демонстрация Скачать исходники

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



Распечатать
Похожие статьи
17 июля 2015 12:15 Как создать красивую всплывающую подсказку на сайте с помощью CSS?
11 марта 2013 14:15 Как создать div блок с прокруткой?
15 мая 2017 18:13 Как сделать видео фоном блока на CSS?
19 ноября 2014 16:01 Как создать блок для комментария или статуса на CSS
31 мая 2017 18:46 Как создать индикатор (полосу) прокрутки страницы на CSS3?


Комментарии к статье (vk.com)