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

You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > MozTransformOrigin

MozTransformOrigin style property | webkitTransformOrigin style property

Browser support:

MozTransformOrigin

webkitTransformOrigin

Specifies or returns the origin of two-dimensional linear transformations specified with the MozTransform property.

The origin is always relative to the element. If a transformation moves the element, the origin will also be moved.

Syntax:

object.MozTransformOrigin;
object.webkitTransformOrigin;

You can find the related objects in the Supported by objects section below.

MozTransformOrigin:	This property is read/write.
webkitTransformOrigin:	This property is read/write.

CSS page for this property: -moz-transform-origin

Possible values:

The type of this property is string.

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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the MozTransformOrigin and webkitTransformOrigin properties in JavaScript:

<head>
    <style>
        #transformed {
             width: 200px;
             border:4px solid #ff0000;
             
            -moz-transform-origin: 70px 110px;
            -webkit-transform-origin: 70px 110px;

            -moz-transform: rotate(40deg);
            -webkit-transform: rotate(40deg);
        }
    </style>
    <script type="text/javascript">
        function ChangeOrigin () {
            var x = document.getElementById ("x").value;
            var y = document.getElementById ("y").value;

            var unitSelect = document.getElementById ("unitSelect");
            var unit = unitSelect.value;

            var transformed = document.getElementById ("transformed");
            if ('MozTransformOrigin' in transformed.style) {
                transformed.style.MozTransformOrigin = x + unit + " " + y + unit;
            }
            else if ('webkitTransformOrigin' in transformed.style) {
                transformed.style.webkitTransformOrigin = x + unit + " " + y + unit;
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    <div style="margin-bottom:200px;">
        X: <input type="text" id="x" value="70"/><br />
        Y: <input type="text" id="y" value="110"/><br />
        unit: 
        <select id="unitSelect">
            <option selected="selected">%</option>
            <option>px</option>
        </select>
        <button onclick="ChangeOrigin ();">Change Origin</button>
    </div>
    <div id="transformed">The transformed element</div>
</body>