CSS3 Transforms | Rotate transformation

CSS3 transforms allow you to translate, rotate, scale, and skew elements. It lets elements change shape, size, and position.

Rotate transformation

The rotate() method rotates an element according to a given degree.

#div2 {
	width: 200px;
	height: 100px;
	background-color: orange;
}
#div2:hover {
	transform: rotate(10deg);
}

Negative value will result in a counter clockwise rotation.

#div3 {
	width: 200px;
	height: 100px;
	background-color: orange;
	margin-bottom: 20px;
}
#div3:hover {
	transform: rotate(-10deg);
}

Note:
CSS3 supports 2D and 3D transformations.

Leave a Reply