Функция rotate
Функцията rotate() задава завъртане на елемент
на зададен ъгъл. Използва се съвместно
ъс свойството transform.
Стойността на свойството е ъгъл във всякакви единици
за ъгли. Положителната стойност завърта
по часовниковата стрелка, отрицателна - обратно.
Завъртането се извършва около точка, зададена
ъс свойството transform-origin.
Синтаксис
селектор {
transform: rotate(ъгъл);
}
Пример
В този пример блокът е завъртян на 30
градуса по часовниковата стрелка:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Пример
В този пример блокът е завъртян на 30
градуса обратно на часовниковата стрелка:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Пример
В този пример блокът при посочване ще се завърти
на 1 оборот, тъй като стойността на завъртането
е зададена в 1turn (същия ефект може да се постигне,
ако се зададе ъгъл на завъртане в 360deg). За
плавност на завъртането е добавено свойство
transition:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate(1turn);
}
:
