Функција rotate
Функција rotate() задаје ротацију елемента
за задати угао. Користи се заједно
са својством transform.
Вредност својства је угао у било којој јединици
за углове. Позитивна вредност ротира
у смеру казаљке на сату, негативна - супротно.
Ротација се врши око тачке, задате
својством transform-origin.
Синтакса
селектор {
transform: rotate(угaо);
}
Пример
У овом примеру блок је ротиран за 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);
}
:
