CSS3 Transforms | transform-origin

The transform-origin property allows you to change the position of transformed elements. The 50% 50% corresponds to the center of the element; which is the default value.

In the example below, we use the transform-origin property together with transform-rotate.

#div4 {
	position: relative;
	height: 100px;
	width: 100px;
	margin: 20px;
	padding: 10px;
	border: 1px solid white;
	margin-bottom: 30px;
}
#div5 {
	padding: 50px;
	position: absolute;
	background-color: orange;
	border: 1px solid white;
	margin-bottom: 30px;
}
#div5:hover {
	transform: rotate(15deg);
	transform-origin: 80% 20%;
}

Try it below:

Note:
The transform-origin property must be used together with the transform property.

Leave a Reply