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

См. также функции transform: rotateX, transform: rotateY, transform: rotateZ, а также функцию transform: rotate3d.

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

Синтаксис

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

Значения

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

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

Примеры

Пример

В данном примере блок повернут на 30 градусов по часовой стрелке:

#elem {
	-o-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	border: 1px solid black;
	width: 100px;
	height: 50px;
}

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

Привет, мир!

Пример

В данном примере блок повернут на 30 градусов против часовой стрелки:

#elem {
	-o-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-webkit-transform: rotate(-30deg);
	transform: rotate(-30deg);
	border: 1px solid black;
	width: 100px;
	height: 50px;
}

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

Привет, мир!

Пример

В данном примере блок по наведению повернется на 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: rotate(1turn);
	-ms-transform: rotate(1turn);
	-moz-transform: rotate(1turn);
	-webkit-transform: rotate(1turn);
	transform: rotate(1turn);
}

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

Привет, мир!