Функцыя rotate

Функцыя rotate() задае паварот элемента на заданы вугал. Выкарыстоўваецца сумесна са ўласцівасцю transform. Значэннем уласцівасці служыць вугал у любых адзінках для вуглоў. Дадатныя значэнні паварочваюць па гадзіннікавай стрэлцы, адмоўныя - супраць. Паварот ажыццяўляецца вакол кропкі, якая задаецца ўласцівасцю transform-origin.

Сінтаксіс

cssселектар {
  transform: rotate(вугал);
}

Прыклад

У гэтым прыкладзе блок павернуты на 30 градусаў па гадзіннікавай стрэлцы:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: rotate(30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Прыклад

У гэтым прыкладзе блок павернуты на 30 градусаў супраць гадзіннікавай стрэлкі:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: rotate(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Прыклад

У гэтым прыкладзе блок па навядзенні павернецца на 1 абарот, бо значэнне павароту зададзена ў 1turn (таго ж эфекту можна дабіцца, калі задаць вугал павароту ў 360deg). Для плыўнасці павароту дададзена ўласцівасць transition:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotate(1turn);
}

Результат:

Глядзіце таксама