# Property Description

The transform property allows modification of the coordinate space of the CSS visual formatting model. By modifying it, elements can be translated, rotated, scaled, and skewed.

This property has the following syntax:

    transform:
      none |
      <transform-function>
      [, <transform-function>]*

# Property Values

Value | Description
--- | ---
none | Specifies that no transform should be applied
transform-function | Specifies one or more of the CSS transform functions to be applied

# Transformation Functions

## matrix

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

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

## rotate

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: rotate(angle);

## scale

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

    transform: scale(sx[,sy]);

## scaleX

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

    transform: scale(sx);

## scaleY

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

    transform: scale(sy);

## skew

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

    transform: skew(ax[,ay]);

## skewX

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

    transform: skewX(angle);

## skewY

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

    transform: skewY(angle);

## translate

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

    transform:
      translate(tx[,ty]);

## translateX

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

    transform:
      translateX(tx);

## translateY

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

    transform:
      translateY(ty);

# Examples

The following examples demonstrate various transform and transform-origin settings:

Property / Value | Result
--- | ---
`transform: none;` |
`transform: rotate(30deg)` |
`transform: rotate(30deg); transform-origin: 0 0;` |
`transform: rotate(30deg); transform-origin: 100% 100%;` |
`transform: rotate(30deg); transform-origin: -10em -20em;` |
`transform: scale(1.9)` |
`transform: scale(1.9); transform-origin: 0 0;` |
`transform: scale(1.9); transform-origin: 100% -30%;` |
`transform: skew(50deg)` |
`transform: skew(50deg); transform-origin: 0 0;` |
`transform: skew(50deg); transform-origin: 100% 100%;` |

# Browser Support

Firefox | IE | Chrome | Opera | Safari

# Miscellaneous Information

Inherited: | No
Defined In: | Mozilla Specific
Initial Value: | none
Applies To: | All block level and inline level elements