# Property Description

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

This property has the following syntax:

    -moz-transform-origin:
      [<percentage> | <length> |
        left | center | right] |
      [<percentage> | <length> |
        top | center | bottom]

    -moz-transform-origin:
      [left | center | right] ||
      [top | center | bottom]

# Property Values

Value | Description
--- | ---
percentage | Specifies a percentage of the element where to place the transform-origin (0% 0% is upper left corner, 100% 100% is bottom right)
length | Specifies a length where to place the transform-origin (0 0 is upper left corner, 2cm 5cm is 2cm to the right and 5 cm down)
top left | left top | Same as 0 0
top | top center | center top | Same as 50% 0
right top | top right | Same as 100% 0
left | left center | center left | Same as 0 50%
center | center center | (default) Same as 50% 50%
right | right center | center right | Same as 100% 50%
bottom left | left bottom | Same as 0 100%
bottom | bottom center | center bottom | Same as 50% 100%
bottom right | right bottom | Same as 100% 100%

# Examples

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

Property / Value | Result
--- | ---
`-moz-transform: none;` |
`-moz-transform: rotate(30deg)` |
`-moz-transform: rotate(30deg); -moz-transform-origin: 0 0;` |
`-moz-transform: rotate(30deg); -moz-transform-origin: 100% 100%;` |
`-moz-transform: scale(1.5)` |
`-moz-transform: scale(1.5); -moz-transform-origin: 0 0;` |
`-moz-transform: scale(1.5); -moz-transform-origin: 100% -30%;` |
`-moz-transform: skew(50deg)` |
`-moz-transform: skew(50deg); -moz-transform-origin: 0 0;` |
`-moz-transform: skew(50deg); -moz-transform-origin: 100% 100%;` |

# Browser Support

Firefox | IE | Chrome | Opera | Safari

# Miscellaneous Information

Inherited: | No
Defined In: | Mozilla Specific
Initial Value: | 50% 50%
Applies To: | All block level and inline level elements