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 можно просмотреть по ссылке ниже.
Спасибо за внимание! И удачи в разработке дизайна!