CSS3 transform-origin property


Set the base point position of the rotating element:

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

Try it out . . .

Browser support

The numbers in the table support the first browser version number of the property.

The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports the prefix property.

Attributes
transform-origin
(two-value syntax) 		36.0
4.0 -webkit- 		10.0
9.0 -ms- 		16.0
3.5 -moz- 		9.0
3.2 -webkit- 		23.0
15.0 -webkit-
10.5 -o-
transform-origin
(three-value syntax) 		36.0
12.0 -webkit- 		10.0 16.0
10.0 -moz- 		9.0
4.0 -webkit- 		23.0
15.0 -webkit-

Description of property definition and use

The transform-Origin property allows you to change the position of the converted element.

2D conversion elements can change the X and Y axes of an element. 3D transforms the element, and you can also change the Z-axis of the element.

To better understand transform-Origin properties, check out this demo .

Note: You must first use the transform property to use this property.

Tip: Safari/Chrome users: To better understand the 3D conversion property, check out the demo .

Default: 50% 50% 0
Inherited: no
Version: CSS3
JavaScript syntax: object .style.transformOrigin="20% 40%"

Grammar

transform-origin: x-axis y-axis z-axis ;

Value Describe
x-axis

Define where the view is placed on the X-axis. Possible values:

  • left
  • center
  • right
  • length
  • %
y-axis

Define where the view is placed on the Y-axis. Possible values:

  • top
  • center
  • bottom
  • length
  • %
z-axis

Define where the view is placed on the Z-axis. Possible values:

  • length