Понедельник, 09 Июля 2012 10:33

Вращение текста при помощи CSS3

Written by 
Оцени эту запись
(3 Голоса)

В CSS3 есть возможность вращения элементов, поворота на заданный угол. 

 

 

transform: rotate(90deg);

-ms-transform: rotate(90deg);

-webkit-transform: rotate(90deg);

-o-transform: rotate(90deg);

-moz-transform: rotate(90deg);

 

Пример:

Поворот текста на 90 градусов

 

 

 

 

 

 

Поворот применим для блочныч элементов. Я обвела этот блок в рамку, чтобы были видны его реальные размеры и позиция. Для того, чтобы поставить этот блок в нужное место. нам еще нужно будет его подвигать. Сдеалем это при помощи отступов margin:

 

 

Поворот текста на 90 градусов

 

 

 

 

<div style="transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -moz-transform: rotate(90deg); border: 1px solid green; width: 105px; margin-top: 50px; margin-left: -30px;">
Поворот текста на 90 градусов</div>
 
 
 
А теперь попробуем сделать поворот блока, в котором текст будет стоять горизонтально:
 
 
 
Горизонтальный текст в перевернутом блоке

 

 

 

Ну и добавим им отступы:

 

 

Горизонтальный текст в перевернутом блоке

 

 

 

 

<div style="transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -moz-transform: rotate(45deg); background: #7D26CD; width: 200px; height: 200px; margin-top: 50px; margin-left: 50px;">
<div style="text-align: center; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -moz-transform: rotate(-45deg); margin-left: -37px; padding-top: 100px; width: 200px;">
Горизонтальный текст в перевернутом блоке</div>
</div>
 
 
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов