Функцыя rotateY

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

Сінтаксіс

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

Прыклад

У гэтым прыкладзе блок пры навядзенні павернецца на 180 градусаў па восі Y. Для плаўнасці павароту дададзена ўласцівасць 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: rotateY(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: right center;
}
#elem:hover {
  transform: rotateY(180deg);
}

Результат:

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