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

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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content