Функција 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);
}
:
