Функции transform: rotateX(), transform: rotateY(), transform: rotateZ() задают поворот элемента на заданное количество градусов относительно определенной оси в трехмерном пространстве.

Положительное значение поворачивает по часовой стрелке, отрицательное - против.

Поворот осуществляется вокруг точки, задаваемой свойством transform-origin (по умолчанию это центр элемента).

Обратите внимание на то, что при любых трансформациях transform, другие элементы будут вести себя так, будто мы не трансформировали элемент, и он даже может налезть на другие.

См. также функцию transform: rotate, которая задает поворот в 2D пространстве, а по сути является аналогом transform: rotateZ(), а также функцию transform: rotate3d.

Синтаксис

селектор {
	transform: rotate(угол: deg | rad | grad | turn);
}

Значения

Значение Описание
Угол Угол в любом допустимом в CSS формате.

Значение по умолчанию: 0deg.

Примеры

Пример

В данном примере блок по наведению повернется на 180 градусов по оси X. Для плавности поворота добавлено свойство transition:

#elem {
	border: 3px solid black;
	width: 100px;
	height: 50px;
	-o-transition: transform 3s linear;
	-ms-transition: transform 3s linear;
	-moz-transition: transform 3s linear;
	-webkit-transition: transform 3s linear;
	transition: transform 3s linear;
}
#elem:hover {
	-o-transform: rotateX(180deg);
	-ms-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
}

Результат выполнения кода:

Привет, мир!

Пример

В данном примере блок по наведению повернется на 180 градусов по оси Y. Для плавности поворота добавлено свойство transition:

#elem {
	border: 3px solid black;
	width: 100px;
	height: 50px;
	-o-transition: transform 3s linear;
	-ms-transition: transform 3s linear;
	-moz-transition: transform 3s linear;
	-webkit-transition: transform 3s linear;
	transition: transform 3s linear;
}
#elem:hover {
	-o-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

Результат выполнения кода:

Привет, мир!

Пример

В данном примере блок по наведению повернется на 180 градусов по оси Z. Для плавности поворота добавлено свойство transition:

#elem {
	border: 3px solid black;
	width: 100px;
	height: 50px;
	-o-transition: transform 3s linear;
	-ms-transition: transform 3s linear;
	-moz-transition: transform 3s linear;
	-webkit-transition: transform 3s linear;
	transition: transform 3s linear;
}
#elem:hover {
	-o-transform: rotateZ(180deg);
	-ms-transform: rotateZ(180deg);
	-moz-transform: rotateZ(180deg);
	-webkit-transform: rotateZ(180deg);
	transform: rotateZ(180deg);
}

Результат выполнения кода:

Привет, мир!

Пример

В данном примере блок по наведению повернется на 1 оборот, так как значение поворота задано в 1turn (такого же эффекта можно добиться, если задать угол поворота в 360deg). Для плавности поворота добавлено свойство transition:

#elem {
	border: 3px solid black;
	width: 100px;
	height: 50px;
	-o-transition: transform 3s linear;
	-ms-transition: transform 3s linear;
	-moz-transition: transform 3s linear;
	-webkit-transition: transform 3s linear;
	transition: transform 3s linear;
}
#elem:hover {
	-o-transform: rotateZ(1turn);
	-ms-transform: rotateZ(1turn);
	-moz-transform: rotateZ(1turn);
	-webkit-transform: rotateZ(1turn);
	transform: rotateZ(1turn);
}

Результат выполнения кода:

Привет, мир!