Функция transform: rotate3d(X, Y, Z, градусы) задает поворот элемента на заданное количество градусов одновременно относительно оси X, Y, Z в трехмерном пространстве.

Первые три параметра определяют, вокруг какой из осей координат будет вращаться объект, а последний – на сколько градусов. X, Y и Z задаются не как абсолютные величины, а как соотношение углов. Например, код transform: rotate3d(2, 1, 0, 90deg) заставит объект повернуться на 90 градусов вокруг оси X и на 45 (90 * 1 / 2) градусов вокруг Y. То же самое сделает и строчка transform: rotate3d(90, 45, 0, 90deg).

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

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

Синтаксис

селектор {
	transform: rotate3d(множитель по X, множитель по Y, множитель по Z, угол);
}

Значения

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

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

Примеры

Пример

В данном примере блок по наведению повернется на 30 градусов по оси X, 60 градусов по оси Y и 90 градусов по оси 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: rotate3d(2, 1, 0, 180deg);
	-ms-transform: rotate3d(2, 1, 0, 180deg);
	-moz-transform: rotate3d(2, 1, 0, 180deg);
	-webkit-transform: rotate3d(2, 1, 0, 180deg);
	transform: rotate3d(2, 1, 0, 180deg);
}

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

Привет, мир!