Property Description

The transform-origin property allows modification of the origin for transformations of an element.

This property has the following syntax:

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

Property Values

Value	Description
x-axis	Specifies where the view is placed on the x-axis. Possible values include: left, center, right, length, %
y-axis	Specifies where the view is placed on the y-axis. Possible values include: top, center, bottom, length, %
z-axis	Specifies where the view is placed on the z-axis. Possible values include: length
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

The following examples demonstrate various transform and transform-origin settings:

Property / Value	Result
`-webkit-transform: none;`
`-webkit-transform: rotate(45deg)`
`-webkit-transform: rotate(45deg); -webkit-transform-origin: 0 0;`
`-webkit-transform: rotate(45deg); -webkit-transform-origin: 100% 100%;`
`-webkit-transform: scale(2.0)`
`-webkit-transform: scale(2.0); -webkit-transform-origin: 0 0;`
`-webkit-transform: scale(2.0); -webkit-transform-origin: 100% -30%;`
`-webkit-transform: skew(30deg)`
`-webkit-transform: skew(30deg); -webkit-transform-origin: 0 0;`
`-webkit-transform: skew(30deg); -webkit-transform-origin: 100% 100%;`

Chrome	Firefox	IE	Safari	Opera
36.0 4.0 -webkit-	16.0 3.5 -moz-	10.0 9.0 -ms-	3.2 -webkit	23.0 15.0 -webkit- 10.5 -o-

Chrome	Firefox	IE	Safari	Opera
36.0 12.0 -webkit-	16.0 10.0 -moz-	10.0	4.0 -webkit	23.0 15.0 -webkit-