Cookies improve the way our website works, by using this website you are agreeing to our use of cookies. For more information see our privacy policy. OK
WordPress Theme & Editor Syntax Highlighter Blog
WordPress Theme & Editor Syntax Highlighter Forum Blog
You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > MozTransform

MozTransform style property | webkitTransform style property

Browser support:
MozTransform
webkitTransform
Specifies or returns the two-dimensional linear transformation applied to an element. The origin of the transformation is specified by the MozTransformOrigin property.
With linear transformations you can rotate, scale, skew and translate elements, or you can perform a series of rotations, scales, skews and translations in arbitrary order.
The MozTransform and webkitTransform properties provide some easy-to-use functions for the most common operations (such as rotate, scale, skew and translate) and a function to specify a generic transformation (matrix).
All functions can be used arbitrary times and in any order. Note that any combination of two-dimensional linear transformations can be specified with a single call to the matrix function. If you need a simple operation on an element (for example just one rotation or translation) then use the corresponding method, but if you need a complex operation on an element then you can use the matrix method for faster rendering. In the examples section below, you can find several related code samples.

In Internet Explorer, the matrix filter provides similar functionality.

Note that these transformation functions are similar to the transformations supported by SVG and VML.

In the followings, the origin is always the one specified by the MozTransformOrigin property.

Syntax:

object.MozTransform;
object.webkitTransform;
You can find the related objects in the Supported by objects section below.
MozTransform: This property is read/write.
webkitTransform: This property is read/write.
CSS page for this property: -moz-transform

Possible values:

The type of this property is string.
 One of the following values: 
• none
•
 Any of the following values (use the space character to separate them, each value can be used arbitrary times): 
• matrix(a, b, c, d, transX, transY)
• rotate(angle)
• scale(x[, y])
• scaleX(x)
• scaleY(y)
• skew(angleX[, angleY])
• skewX(angleX)
• skewY(angleY)
• translate(x[, y])
• translateX(x)
• translateY(y)

Description of values:

matrix(a, b, c, d, transX, transY)
Performs a linear transformation on the element specified by the given matrix. The transX and transY values must be given in length units in Firefox and without the use of length units in Google Chrome and Safari (they always calculate these values in pixels). For the supported length units, see the length page.
none
No transformation needs to be performed.
rotate(angle)
Rotates the element clockwise around the origin by the given angle. The angle must be followed by a unit designator (deg, grad or rad).
scale(x[, y])
Scales the element from the origin by factors of x and y. If y is not specified, then scales in both directions by a factor of x.
scaleX(x)
Scales the element from the origin along the horizontal axis by a factor of x.
scaleY(y)
Scales the element from the origin along the vertical axis by a factor of y.
skew(angleX[, angleY])
Performs an anticlockwise skew horizontally and a clockwise skew vertically on the element by the given angles. Each angle must be followed by a unit designator (deg, grad or rad). The default value of angleY is zero (no vertical skew).
skewX(angleX)
Performs an anticlockwise skew on the element horizontally by angleX. The angle must be followed by a unit designator (deg, grad or rad).
skewY(angleY)
Performs a clockwise skew on the element vertically by angleY. The angle must be followed by a unit designator (deg, grad or rad).
translate(x[, y])
Translates the element horizontally by x and vertically by y. The values of x and y must be specified in length units. For the supported length units, see the length page. The default value of y is zero (no vertical translation).
translateX(x)
Translates the element horizontally by x. The value of x must be specified in length units. For the supported length units, see the length page.
translateY(y)
Translates the element vertically by y. The value of y must be specified in length units. For the supported length units, see the length page.
Default: none.

Transform Functions:

Matrix

matrix(a, b, c, d, transX, transY)

Performs a linear transformation on the element specified by the given matrix. Each point of the element is represented by an (x, y, 1) vector, where x and y are the coordinates of the point in the local coordinate system specified by the MozTransformOrigin property. The result of the matrix method is the following matrix multiplication:

This means that every point (x, y) moves to the point (a * x + c * y + transX, b * x + d * y + transY).

For example:
  • matrix(1, 0, 0, 1, 0px, 0px) is an identity transformation (every point stays fixed):
    (x, y) --> (1 * x + 0 * y + 0, 0 * x + 1 * y + 0) = (x, y)
  • matrix(2, 0, 0, 1, 0px, 0px) is an origin-based horizontal scaling by two:
    (x, y) --> (2 * x + 0 * y + 0, 0 * x + 1 * y + 0) = (2 * x, y)
  • matrix(1, 0, 0, 2, 0px, 0px) is an origin-based vertical scaling by two:
    (x, y) --> (1 * x + 0 * y + 0, 0 * x + 2 * y + 0) = (x, 2 * y)
  • matrix(3, 0, 0, 3, 0px, 0px) is an origin-based magnification by three:
    (x, y) --> (3 * x + 0 * y + 0, 0 * x + 3 * y + 0) = (3 * x, 3 * y)
  • matrix(-1, 0, 0, 1, 0px, 0px) is a horizontal reflection against the y-axis:
    (x, y) --> (-1 * x + 0 * y + 0, 0 * x + 1 * y + 0) = (-x, y)
  • matrix(1, 0, 0, -1, 0px, 0px) is a vertical reflection against the x-axis:
    (x, y) --> (1 * x + 0 * y + 0, 0 * x + -1 * y + 0) = (x, -y)
  • matrix(-1, 0, 0, -1, 0px, 0px) is a reflection across the origin:
    (x, y) --> (-1 * x + 0 * y + 0, 0 * x + -1 * y + 0) = (-x, -y)
  • matrix(-2, 0, 0, 1, 0px, 0px) is a reflection across the origin a horizontal scaling by two:
    (x, y) --> (-2 * x + 0 * y + 0, 0 * x + 1 * y + 0) = (-2 * x, y)
  • matrix(1, 0, 1, 1, 0px, 0px) is an anticlockwise horizontal skew by 45 degrees.
    (x, y) --> (1 * x + 1 * y + 0, 0 * x + 1 * y + 0) = (x + y, y)
    Moves every point of the element horizontally by its y-coordinate.
  • matrix(1, 0, -1, 1, 0px, 0px) is a clockwise horizontal skew by 45 degrees.
    (x, y) --> (1 * x - 1 * y + 0, 0 * x + 1 * y + 0) = (x - y, y)
    Moves every point of the element horizontally by the negative of its y-coordinate.
  • matrix(1, 1, 0, 1, 0px, 0px) is a clockwise vertical skew by 45 degrees.
    (x, y) --> (1 * x + 0 * y + 0, 1 * x + 1 * y + 0) = (x, y + x)
    Moves every point of the element vertically by its x-coordinate.
  • matrix(1, -1, 0, 1, 0px, 0px) is an anticlockwise vertical skew by 45 degrees.
    (x, y) --> (1 * x + 0 * y + 0, -1 * x + 1 * y + 0) = (x, y - x)
    Moves every point of the element vertically by the negative of its x-coordinate.
  • matrix(1, 0, 0, 1, 5px, 0px) is a horizontal translation by 5px:
    (x, y) --> (1 * x + 0 * y + 5px, 0 * x + 2 * y + 0) = (x + 5px, y)
  • matrix(1, 0, 0, 1, 0px, -10px) is a vertical translation by -10px:
    (x, y) --> (1 * x + 0 * y + 5px, 0 * x + 2 * y + 0) = (x, y - 10px)

The main advantage of the matrix function is that every two dimensional linear transformation can be described with just one matrix function.

It is based on matrix multiplication (and its multiplicative property):
Since the MozTransformOrigin property specifies the origin relative to the element, and the x and y axises are always parallel to the horizontal and vertical sides of the element, the transformations modify the local coordinate system. Because of this behavior, transformation matrices need to be multiplied from right to left instead of from left to right.

This means that:

matrix(a1, b1, c1, d1, transX1, transY1) matrix(a2, b2, c2, d2, transX2, transY2) =
matrix(a2*a1 + b2*c1, a2*b1 + b2*d1, c2*a1 + d2*c1, c2*b1 + d2*d1, transX2*a1 + transY2*c1 + transX1, transX2*b1 + transY2*d1 + transY1)

For example, if you want to perform a horizontal reflection against the y-axis followed by a horizontal translation by 5px, then you can do it by using the following formats:
  • matrix(-1, 0, 0, 1, 0px, 0px) matrix(1, 0, 0, 1, 5px, 0px)
  • or matrix(-1, 0, 0, 1, -5px, 0px)
If you want to perform these operations in reverse order, such as a horizontal translation by 5px followed by a horizontal reflection against the y-axis, you can do it by using one of the following methods:
  • matrix(1, 0, 0, 1, 5px, 0px) matrix(-1, 0, 0, 1, 0px, 0px)
  • or matrix(-1, 0, 0, 1, 5px, 0px)

If you have more than two transformations, then multiply the first two matrices from right to left and replace them with the result matrix. With this step you have reduced the number of transformations by one. Repeat this step until only one matrix remains, which will be the result matrix.

Rotate

rotate(angle)

Rotates the element clockwise around the origin by the given angle. The angle must be followed by a unit designator (deg, grad or rad).

Equivalent to the matrix(cos(angle), sin(angle), -sin(angle), cos(angle), 0, 0) transformation.

Please see Example 2 for further details.

Scale

Three scale functions are supported:

  1. scale(x[, y])

    Scales the element from the origin by factors of x and y. If y is not specified, then scales both horizontally and vertically by a factor of x.

    Equivalent to the matrix(x, 0, 0, y, 0, 0) transformation.

  2. scaleX(x)

    Scales the element from the origin along the horizontal axis by a factor of x.

    Equivalent to the matrix(x, 0, 0, 1, 0, 0) transformation.

  3. scaleY(y)

    Scales the element from the origin along the vertical axis by a factor of y.

    Equivalent to the matrix(1, 0, 0, y, 0, 0) transformation.

Please see Example 3 for further details.

Skew

Three skew functions are supported:

  1. skew(angleX[, angleY])

    Performs an anticlockwise skew horizontally and a clockwise skew vertically on the element by the given angles. Each angle must be followed by a unit designator (deg, grad or rad). The default value of angleY is zero (no vertical skew).

    Equivalent to the matrix(1, tan(angleY), tan(angleX), 1, 0, 0) transformation.

  2. skewX(angleX)

    Performs an anticlockwise skew on the element horizontally by angleX. The angle must be followed by a unit designator (deg, grad or rad).

    Equivalent to the matrix(1, 0, tan(angleX), 1, 0, 0) transformation.

  3. skewY(angleY)

    Performs a clockwise skew on the element vertically by angleY. The angle must be followed by a unit designator (deg, grad or rad).

    Equivalent to the matrix(1, tan(angleY), 0, 1, 0, 0) transformation.

Please see Example 4 for further details.

Translate

Three translate functions are supported:

  1. translate(x[, y]

    Translates the element horizontally by x and vertically by y. The values of x and y must be specified in length units. For the supported length units, see the length page. The default value of y is zero (no vertical translation).

    Equivalent to the matrix(1, 0, 0, 1, x, y) transformation.

  2. translateX(x)

    Translates the element horizontally by x. The value of x must be specified in length units. For the supported length units, see the length page.

    Equivalent to the matrix(1, 0, 0, 1, x, 0) transformation.

  3. translateY(y)

    Translates the element vertically by y. The value of y must be specified in length units. For the supported length units, see the length page.

    Equivalent to the matrix(1, 0, 0, 1, 0, y) transformation.

Please see Example 1 for further details.

Example HTML code 1:

This example illustrates the use of the -moz-transform and -webkit-transform properties and the translate method:
 
<head>
    <style>
        .notrans {
             width: 300px;
             border:4px solid #ff0000;
        }

        .trans {
             width: 300px;
             border:4px solid #ff0000;
             
            -moz-transform: translate(100px, 0px);
            -webkit-transform: translate(100px, 0px);
        }
    </style>
</head>
<body>
    <div class="notrans">An element without translation</div>
    <br /><br />
    <div class="trans">An element translated horizontally by 100px</div>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the -moz-transform and -webkit-transform properties and the rotate method:
 
<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 Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the -moz-transform and -webkit-transform properties and the scale method:
 
<head>
    <style>
        .noscaled {
             width: 300px;
             height: 30px;
             border:4px solid #ff0000;
        }

        .scaled {
             width: 300px;
             height: 30px;
             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: scale(2, 3);
            -webkit-transform: scale(2, 3);
        }
    </style>
</head>
<body>
    <div class="noscaled">A 300x30 element without scaling</div>
    <br /><br />
    <div class="scaled">A 300*30 scaled element</div>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 4:

This example illustrates the use of the -moz-transform and -webkit-transform properties and the skew method:
 
<head>
    <style>
        .base {
             width: 300px;
             height: 80px;
             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 */
        }

        .skewH {
            -moz-transform: skewX(20deg);
            -webkit-transform: skewX(20deg);
        }
        .skewV {
            -moz-transform: skewY(20deg);
            -webkit-transform: skewY(20deg);
        }
        .skewHV {
            -moz-transform: skew(20deg, 20deg);
            -webkit-transform: skew(20deg, 20deg);
        }
    </style>
</head>
<body>
    <div class="base skewH">Horizontal skew</div>
    <br /><br />
    <div class="base skewHV">Horizontal and vertical skew</div>
    <br /><br />
    <div class="base skewV">Vertical skew</div>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 5:

This example illustrates the use of the -moz-transform and -webkit-transform properties and the matrix method:
 
<head>
    <style>
        .base {
             width: 300px;
             height: 80px;
             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 */
        }

        .rotate_translate {
            -moz-transform: rotate(30deg) translateX(200px);
            -webkit-transform: rotate(30deg) translateX(200px);
        }
        .rotateMatrix_translateMatrix {
            -moz-transform: matrix(0.866, 0.5, -0.5, 0.866, 0px, 0px) matrix(1, 0, 0, 1, 200px, 0px);
            -webkit-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0) matrix(1, 0, 0, 1, 200, 0);
        }
        .rotate_translateMatrix {
            -moz-transform: matrix(0.866, 0.5, -0.5, 0.866, 160px, 100px);
            -webkit-transform: matrix(0.866, 0.5, -0.5, 0.866, 160, 100);
        }
    </style>
</head>
<body>
    <div class="base rotate_translate">Skew and rotate</div>
    <br /><br />
    <div class="base rotateMatrix_translateMatrix">Skew matrix and rotation matrix</div>
    <br /><br />
    <div class="base rotate_translateMatrix">Skew and rotation matrix</div>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 6:

This example illustrates the use of the -moz-transform, -webkit-transform and the filter properties:
 
<head>
    <style>
        .rotate_scale {
             width: 300px;
             height: 300px;
             background-color:red;
             
             filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.433, M12=-0.25, M21=0.25, M22=0.433, Dx=100, Dy=50);
            -moz-transform: matrix(0.433, 0.25, -0.25, 0.433, 0px, 0px);
            -webkit-transform: matrix(0.433, 0.25, -0.25, 0.433, 0, 0);
        }
    </style>
</head>
<body>
    <div class="rotate_scale"></div>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 7:

This example illustrates the use of the MozTransform and webkitTransform properties in JavaScript:
 
<head>
    <style>
        #redBox {
             width: 100px;
             height: 100px;
             background-color: red;          
        }
    </style>
    <script type="text/javascript">
        function Init () {
            var degreesCombo = document.getElementById ("degreesCombo");
            for (var i = 0; i < 360; i++) {
                var option = document.createElement ("option");
                option.value = i;
                option.text = "" + i;
                degreesCombo.options.add (option);
            }
        }

        function OnDegreeChanged (select) {
            var redBox = document.getElementById ("redBox");
            if ('MozTransform' in redBox.style) {
                redBox.style.MozTransform = "rotate(" + select.value + "deg)";
            }
            else if ('webkitTransform' in redBox.style) {
                redBox.style.webkitTransform = "rotate(" + select.value + "deg)";
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body onload="Init ()">
    <div style="padding:100px">
        <div id="redBox"></div>
    </div>
    Rotate the red box!
    <select id="degreesCombo" onchange="OnDegreeChanged (this)"></select>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Supported by objects:

Related pages:

MozTransformOrigin

External links:

filter:matrix (MSDN)
-moz-transform (Mozilla Developer Center)
transform (W3C - CSS3)
User Contributed Comments

Post Content

Post Content
WordPress Theme & Editor | Index Panel | Syntax Highlighter | Dottoro
Link To Us | Terms of Use | Contact Us | Privacy Policy
© 2024 Dottoro.com. All rights reserved.
HTML
CSS
JavaScript
Appendix