CSS transform

The CSS transform property is used to transform an element in two-dimensional (2D) or three-dimensional (3D) space. For example, you can rotate elements, scale them, skew them, and more.

The transform property accepts a list of "transform functions" as values. These transform functions have names such as scale(), rotate(), skew(), etc, which accept parameters to determine the level of transformation (for example, the angle to rotate an element).

Syntax

Possible Values

Here are the transform functions accepted by the transform property as outlined by the W3C CSS3 specification.

These are grouped by 2D (two dimensional) and 3D (three dimensional) functions.

2D Transform Functions

matrix()

matrix() = matrix( <number> [,<number> ]{5,5} )

This function specifies a 2D transformation in the form of a transformation matrix of the six values a-f (that is, a, b, c, d, e and f).

translate()

translate( <translation-value>[, <translation-value>]? )

This function moves the position of the element. It specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If <ty> is not provided, ty has zero as a value.

translateX()

translateX( <translation-value> )

This function moves the element horizontally. It specifies a translation by the given amount in the X direction.

translateY()

translateY( <translation-value> )

This function moves the element vertically. It specifies a translation by the given amount in the Y direction.

scale()

scale( <number>[, <number>]? )

This function modifies the size of the element. It specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first. For example, scale(1, 1) would leave an element unchanged, while scale(2, 2) would cause it to appear twice as long in both the X and Y axes, or four times its typical geometric size.

scaleX()

scaleX( <number>[, <number>]? )

Specifies a 2D scale operation using the [sx,1] scaling vector, where sx is given as the parameter.

scaleY()

scaleY( <number>[, <number>]? )

Specifies a 2D scale operation using the [1,sy] scaling vector, where sy is given as the parameter.

rotate()

rotate( <angle> )

This function specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property. For example, rotate(90deg) would cause elements to appear rotated one-quarter of a turn in the clockwise direction.

skew()

skew( <angle> [, <angle> ]? )

Specifies a 2D skew transformation along the X and/or Y axis by the given angles. If the second parameter is not provided, it has a zero value.

skewX()

skewX( <angle> )

Specifies a 2D skew transformation along the X axis by the given angle.

skewY()

skewX( <angle> )

Specifies a 2D skew transformation along the Y axis by the given angle.

3D Transform Functions

3D transform functions allow you to apply transformations along three axes: the x, y, and z axes, as demonstrated by this image of a three dimensional Cartesian coordinate system.

Below are the 3D transform functions available in CSS.

matrix3d()

matrix3d() = matrix3d( <number> [, <number> ]{15,15} )

This function specifies a 3D transformation as a 4x4 homogeneous matrix of 16 values in column-major order.

translate3d()

translate3d() = translate3d( <translation-value> , <translation-value> , <length> )

This function specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively.

translateZ()

translateZ() = translateZ( <length> )

This function specifies a 3D translation by the vector [0,0,tz] with the given amount in the Z direction.

scale3d()

scale3d() = scale3d( <number> , <number> , <number> )

This function specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters.

scaleZ()

scaleZ() = scaleZ( <number> )

This function specifies a 3D scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter.

rotate3d()

rotate3d() = rotate3d( <number> , <number> , <number> , <number> )

This function specifies a 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first three parameters. A direction vector that cannot be normalized, such as [0,0,0], will result in the rotation not being applied.

Rotation is clockwise as the user looks from the end of the vector toward the origin.

rotateX()

rotateX() = rotateX( <angle> )

This is the same as rotate3d(1, 0, 0, <angle>).

rotateY()

rotateY() = rotateY( <angle> )

This is the same as rotate3d(0, 1, 0, <angle>).

rotateZ()

rotateZ() = rotateZ( <angle> )

This is the same as rotate3d(0, 0, 1, <angle>) (which is also the same as rotate( <angle> ).

perspective()

perspective() = perspective( <length> )

This function defines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective.

The W3C also has these mathematical descriptions of transform functions if you're interested.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial

Represents the value specified as the property's initial value.

inherit

Represents the computed value of the property on the element's parent.

unset

This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Example Code

Basic CSS

You can also provide a list of transform functions. For example, you could do this:

Working Example within an HTML Document

CSS Specifications

• The transform property is defined in CSS Transforms Module Level 1 (W3C Working Draft, 26 November 2013).

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn't support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don't need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.