transform property CSS Reference

Definition and Usage

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 according to the values set.

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

Syntax

Formal syntax: none | <transform-function>+

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)

Values

<transform-function>

One or more of the CSS transform functions to be applied, see below.

none

Specifies that no transform should be applied.

Examples

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.

matrix

transform:  matrix(a, c, b, d, tx, ty)
/* Where a, b, c, d build the transformation matrix
   ┌     ┐
   │ a b │
   │ c d │
   └     ┘
   and tx, ty are the translate values.  */

Specifies a 2D transformation matrix comprised of the specified six values. This is the equivalent to applying the transformation matrix [a b c d tx 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);

rotate

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

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].

scale

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.

scaleX

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

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

scaleY

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

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

skew

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.

skewX

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

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

skewY

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

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

translate

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.

translateX

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

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

translateY

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

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

Compatibility

Desktop browsers

Mobile browsers