You are here: Reference > CSS > properties > browser specific extensions > -moz-transform-origin

-moz-transform-origin property | -webkit-transform-origin property

Browser support:
-moz-transform-origin:
-webkit-transform-origin:
Specifies the origin of two-dimensional linear transformations specified with the -moz-transform property.
The origin is always relative to the element. If a transformation moves the element, the origin will also be moved.
JavaScript page for this property: MozTransformOrigin | webkitTransformOrigin. You can find other example(s) there.

Possible values:

 One of the following values: 
 Values in this order (use the space character to separate them): 
1.
origin horizontal position
 One of the following values: 
<horizontal position in length>
horizontal position in percentage
left
center
right
2.
origin vertical position
 One of the following values: 
<vertical position in length>
vertical position in percentage
top
center
bottom
possible but not necessary; left to personal choice
 Any of the following values (use the space character to separate them, each value can be used only once): 
origin horizontal position
 One of the following values: 
left
center
right
origin vertical position
 One of the following values: 
top
center
bottom

Description of values:

bottom
The origin is aligned to the bottom of the element.
center
The origin is aligned to the center of the element.
horizontal position in length
The horizontal position of the origin in length units relative to the left side of the element. For the supported length units, see the length page.
horizontal position in percentage
The horizontal position of the origin is the specified percentage of the width of the element relative to the left side of the element.
left
The origin is aligned to the left side of the element.
right
The origin is aligned to the right side of the element.
top
The origin is aligned to the top of the element.
vertical position in length
The vertical position of the origin in length units relative to the top of the element. For the supported length units, see the length page.
vertical position in percentage
The vertical position of the origin is the specified percentage of the height of the element relative to the top of the element.
Default: 50% 50%.

The rectangle defined by the top, left, right and bottom values includes the padding, scrollBars and border, but excludes the margin and outline.
If only one value is given and it applies to horizontal positioning, the vertical position will be set to 50%. Otherwise, if the single value applies to vertical positioning, the horizontal position will be set to 50%.

Example HTML code 1:

This example illustrates the use of the -moz-transform-origin and -webkit-transform-origin properties:
<head>
    <style>
        .rotated {
             width: 300px;
             border:4px solid #ff0000;
             
            -moz-transform-origin: 0px 0px;     /* move the origin to top-left */
            -webkit-transform-origin: 0px 0px;  /* move the origin to top-left */

            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="rotated">An element rotated by 45 degrees</div>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

Another example for the -moz-transform-origin and -webkit-transform-origin properties:
<head>
    <style>
        .rotated {
            position:absolute;
            left:100px;
            top:60px;
            width: 400px;
            border:4px solid #ff0000;
        }
        .rotatedLT {
            -moz-transform-origin: 0px 0px;     /* move the origin to top-left */
            -webkit-transform-origin: 0px 0px;  /* move the origin to top-left */

            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }
        .rotatedRT {
            -moz-transform-origin: 408px 0px;       /* move the origin to top-right */
            -webkit-transform-origin: 408px 0px;    /* move the origin to top-right */

            -moz-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
        }
    </style>
</head>
<body>
    <div class="rotated rotatedLT">An element rotated by 45 degrees around its top left corner</div>
    <div class="rotated rotatedRT">An element rotated by -45 degrees around its top right corner</div>
</body>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content