Функцыя rotateZ

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

Сінтаксіс

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

Прыклад

У гэтым прыкладзе блок пры навядзенні павернецца на 180 градусаў па восі Z. Для плаўнасці павароту дададзена ўласцівасць 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: rotateZ(180deg);
}

Результат:

Прыклад

Зменім вось кручэння з дапамогай уласцівасці transform-origin:

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

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
  transform-origin: center bottom;
}
#elem:hover {
  transform: rotateZ(180deg);
}

Результат:

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