transform-origin - CSS 3

The transform-origin property allows you to change the position of transformed elements.2D transformations can change the x- and y-axis of an element. 3D transformations 
can also change the z-axis of an element.To better understand the transform-origin property,
view a demo.Note: This property must be used together with the 
transform 
property.Tip: To better understand this property for 3D transforms,
view a demo.

Syntax

transform-origin: x-axis y-axis z-axis|initial|inherit;

Example

div
	{   
	-ms-transform: rotate(45deg); /* IE 9 */
	   
	-ms-transform-origin: 20% 40%; /* IE 9 */
	   
	-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
	   
	-webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
	   
	transform: rotate(45deg);
	   
	transform-origin: 20% 40%;
	}

Output / Return Value

Limitations

Alternatives / See Also

Reference