Функцыя rotateX

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

Сінтаксіс

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

Прыклад

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

Результат:

Прыклад

Задамо адмоўны кут:

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: rotateX(-180deg);
}

Результат:

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