Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

Your Search Results


    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.


    The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed.

    If the property has a value different than none, a stacking context will be created. In that case the object will act as a containing block for position: fixed elements that it contains.

    • Initial value none
    • Applies to transformable elements
    • Inherited no
    • Percentages refer to the size of bounding box
    • Media visual
    • Computed value as specified, but with relative lengths converted into absolute lengths
    • Animatable yes, as a transform
    • Canonical order the unique non-ambiguous order defined by the formal grammar


    transform: none;
    transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
    transform: translate(12px, 50%);
    transform: translateX(2em);
    transform: translateY(3in);
    transform: scale(2, 0.5);
    transform: scaleX(2);
    transform: scaleY(0.5);
    transform: rotate(0.5turn);
    transform: skewX(30deg);
    transform: skewY(1.07rad);
    transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
    transform: translate3d(12px, 50%, 3em);
    transform: translateZ(2px);
    transform: scale3d(2.5, 1.2, 0.3);
    transform: scaleZ(0.3);
    transform: rotate3d(1, 2.0, 3.0, 10deg);
    transform: rotateX(10deg);
    transform: rotateY(10deg);
    transform: rotateZ(10deg);
    transform: perspective(17px);
    transform: translateX(10px) rotate(10deg) translateY(5px);


    One or more of the CSS transform functions to be applied, see below.
    Specifies that no transform should be applied.

    Formal syntax

    none | <transform-function>+


    See Using CSS transforms.


    Live Example

    pre {
         width: 33em;
         border: solid red;
        -webkit-transform: translate(100px) rotate(20deg);
        -webkit-transform-origin: 60% 100%;
        -o-transform:translate(100px) rotate(20deg); 
        -o-transform-origin:60% 100%;
        transform: translate(100px) rotate(20deg);
        transform-origin: 60% 100%;


    CSS transform functions

    The transform CSS property allows the coordinate system used by an element to be manipulated using transform functions. These functions are described below.


    transform:  matrix(a, c, b, d, tx, ty)

    Specifies a 2D transformation matrix comprised of the specified six values. This is the equivalent to applying the transformation matrix (abtxcdty001) \begin{pmatrix} a & b & \mathrm{tx} \\ c & d & \mathrm{ty} \\ 0 & 0 & 1 \end{pmatrix} which maps coordinates from a new coordinate system into a previous coordinate system by the following matrix equalities: (xprevCoordSysyprevCoordSys1)=(abtxcdty001)(xnewCoordSysynewCoordSys1)=(axnewCoordSys+bynewCoordSys+txcxnewCoordSys+dynewCoordSys+ty1) \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & b & \mathrm{tx} \\ c & d & \mathrm{ty} \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{newCoordSys}} + b y_{\mathrm{newCoordSys}} + \mathrm{tx} \\ c x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + \mathrm{ty} \\ 1 \end{pmatrix}

    Note: Old versions of Gecko (Firefox), before Firefox 16, accepted a <length> value for tx and ty. Current Gecko, along with Webkit (Safari, Chrome) and Opera, supports a unitless <number> for tx and ty.

    Live examples

     background: gold;  width: 30em;
     -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
          -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
             transform: matrix(1, -0.2, 0, 1, 0, 0);
     background: wheat;
     max-width: intrinsic;
     -webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
          -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
             transform: matrix(1, 0, 0.6, 1,  250, 0);

    Further knowledge


    transform:  rotate(angle);       /* an <angle>, e.g., rotate(30deg) */

    Live Example

    HTML Content

    <div id="rotate1">
        background-color: yellow;
        -moz-transform: rotate(5deg);
        -ms-transform: rotate(5deg); 
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);

    CSS Content

        background-color: yellow;
        -moz-transform: rotate(5deg);
        -ms-transform: rotate(5deg); /* IE 9 */
        -webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
        transform: rotate(5deg);

    Rotates the element clockwise around its origin (as specified by the transform-origin property) by the specified angle. The operation corresponds to the matrix [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0].


    transform:  scale(sx[, sy]);     /* one or two unitless <number>s, e.g., scale(2.1,4) */

    Specifies a 2D scaling operation described by [sx, sy]. If sy isn't specified, it is assumed to be equal to sx.


    transform:  scaleX(sx);          /* a unitless <number>, e.g., scaleX(2.7) */

    Specifies a scale operation using the vector [sx, 1].


    transform:  scaleY(sy)           /* a unitless <number>, e.g., scaleY(0.3) */

    Specifies a scale operation using the vector [1, sy].


    transform:  skew(ax[, ay])       /* one or two <angle>s, e.g., skew(30deg,-10deg) */

    Skews the element along the X and Y axes by the specified angles. If ay isn't provided, no skew is performed on the Y axis.

    Note: The skew() function was present in early drafts. It has been removed but is still present in some implementations. Do not use it.

    To achieve the same effect, use skewX() if you were using skew() with one parameter or matrix(1, tan(ay), tan(ax), 1, 0, 0) for the general way. Note that tan() isn't a CSS function and you have to precalculate it yourself.


    transform:  skewX(angle)         /* an <angle>, e.g., skewX(-30deg) */

    Skews the element along the X axis by the given angle.


    transform:  skewY(angle)         /* an <angle>, e.g., skewY(4deg) */

    Skews the element along the Y axis by the given angle.


    transform:  translate(tx[, ty])  /* one or two <translation-value> values */

    Specifies a 2D translation by the vector [tx, ty]. If ty isn't specified, its value is assumed to be zero.

    Each <translation-value> arguments may be either a <length> value or a <percentage> value.


    transform:  translateX(tx)       /* <translation-value> */

    Translates the element by the given amount along the X axis.


    transform:  translateY(ty)       /* <translation-value> */

    Translates the element by the given amount along the Y axis.


    Specification Status Comment
    CSS Transforms Level 1
    The definition of 'transform' in that specification.
    Working Draft  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support

    (Yes) -webkit

    3.5 (1.9.1)-moz [2]
    16.0 (16.0) [4]
    9.0 -ms [1]


    3D Support


    16.0 (16.0)
    10.0 15.0-webkit
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support 2.1-webkit [4] (Yes)-webkit (Yes) (Yes)
    11.5 (Yes)-webkit 3.2 (Yes)-webkit
    3D Support 3.0-webkit (Yes)-webkit (Yes) (Yes) 22 (Yes)-webkit 3.2 (Yes)-webkit

    [1] Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.

    [2] Gecko 14.0 removed the experimental support for skew(), but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.

    [3] Android 2.3 has a bug where input forms will "jump" when typing, if any container div has a -webkit-transform.

    [4] Before Firefox 16, the translation values of matrix() and matrix3d() could be <length>, in addition to the standard <number>

    See also