In order to access this site you need to enable JavaScript!

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):

origin horizontal position

One of the following values:

•	<horizontal position in length>
•	horizontal position in percentage
•	left
•	center
•	right

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>

Copy Code

Preview

Syntax Highlighter

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>