Функцыя 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);
}
:
