Transform - Property CSS

transform

Summary of characteristics of the `transform` property

Quick description

Applies one or more geometric transformations (rotations, enlargements, etc.).

Status

Standard

Usable for

HTML, SVG

Percentages

Calculated in relation to the box reference dimensions.

Initial value

none

Inherited by default

No.

Animation type

Computed value : during an animation, the transform property gradually changes from one value to another.

W3C Module

CSS Transforms Module

References (W3C)

CSS Transforms Module Level 1

Document status: CR (Candidate Recommendation)

Syntax diagram of `transform`.

Syntax diagram of the transform property
Description of values and examples

On the diagram, the terms in bold are the predefined words of CSS, the other terms are described below:

transform is a transformation described by one of the functions: rotate(), scale(), skew(), translate(), matrix(), or perspective(), as well as the 3D variants of these functions: rotateX(), rotateY(), rotateZ(), rotate3d(), scaleX(), scaleY(), scaleZ(), scale3d(), skewX(), skewY(), translateX(), translateY(), translateZ(), translate3d(), matrix3d().
The syntax can be repeated multiple times by separating occurrences with a space.

Description of the `transform` property.

Defines the geometric transformations to apply to the element. This can be rotations, translations, tilts, changes in size, or a sequence of several of these transformations.

Inline elements (e.g. a tags) cannot be transformed, nor can elements of a table (rows, columns, cells).

Click on the buttons below to see their CSS code.

This text frame has been rotated from 10-degree

This one was tilted.

This has been shifted down (Y-axis).

The height of this element has been reduced (Y-axis).

Transformations are applied after the layout is made, and do not modify that layout: For example, moving an element does not move the elements that follow it. It is therefore possible that the transformations cause the superimposition of several elements.

Also refer to the description of the functions related to transformations: translate(), rotate(), skew(), scale(), as well as the new translate, rotate and scale property pages, which apply with a simpler syntax, a unitary transformation.

Axis.

Each of the transformations is carried out along an X, Y or Z axis. The plane of the screen is defined by the X and Y (2D) axes, while the Z axis introduces 3D.

The 3 CSS axes for transformations

The x-axis is the horizontal axis, from left to right in the plane of the screen.
The y-axis is the vertical axis, from top to bottom in the plane of the screen.
The z-axis is the axis that goes from the screen to the observer.
Transformations along the Z-axis are often 3D transformations, except for rotations which, when they are are made around the z-axis, remain in the plane of the screen.

Successive transformations.

The axes are linked to the element itself, i.e. they move or orient themselves according to the position and the orientation of the element.

Several successive transformations can be applied to an element. Of course, you should not write multiple rules with the transform property because the last one you encounter would replace the previous one. All transformations should be written one after the other in a single transform property. The order in which the transformations are described is very important.

A rotation followed by a translation

The same translation followed by the same rotation

Transformation matrix.

All transformations applied to an element can be summarized by a matrix of 9 values in the case of 2D transformations, and 16 values for a 3D transformation.
The matrix() and matrix3d() functions allow the designer to write these matrices directly, without going through unitary transformations.

The coordinates of a transformed element (x' and y') are obtained by multiplying the transformation matrix by the original coordinates (x and y). This is done for each of the corners of the element.

2D transformation matrix

Values for `transform`.

transform: none;

No transformation is applied.
transform: translate(50px, 30px); transform: translate3d(50px, 30px, 10px); transform: translateX(50px); transform: translateY(30px); transform: translateZ(10px);

Translation features cause the element to be offset, without distorting it. translate(), translateX(), and translateY() act in the plane of the screen, while translate3d() and translateZ() work in 3D.

For more information, see the description of these functions:
1. translate() : Defines a translation (a linear move) to an element..
2. translate3d() : Defines a 3D translation along one or more of the X, Y, and Z axes..
3. translateX() : Defines a translation along the X-axis (horizontally)..
4. translateY() : Defines a translation along the Y axis (vertically)..
5. translateZ() : Defines a translation along the Z axis (perpendicular to the screen)..
transform: rotate(15deg); transform: rotate3d(1,0,0,15deg); transform: rotateX(10deg); transform: rotateY(25deg); transform: rotateZ(15deg);

These functions cause the element to rotate along one of the axes. Rotate() and rotateZ() rotate in the plane of the screen (in 2D), or rotate3d() along any axis. The other functions are 3D transformation functions.

Refer to the description of rotation functions for a more precise presentation of their syntax.
1. rotate() : Sets a rotation to apply to the element in 2D (in the plane of the screen)..
2. rotate3d() : Defines a 3D rotation to be applied to an element around any axis in 3D..
3. rotateX() : Defines a rotation of the element around the X-axis (in 3D),.
4. rotateY() : Sets a 3D rotation of the element around the y-axis..
5. rotateZ() : Sets a rotation of the element around the z-axis..
transform: skew(15deg,10deg); transform: skewX(15deg); transform: skewY(10deg);

These functions cause the element to tilt. It is also sometimes referred to as a shear of the element. These functions all act n 2D, in the plane of the screen.

See also the description of shear functions:
1. skew() : Sets a tilt of the element along the X and/or Y axes..
2. skewX() : Sets a tilt of the element along the X-axis..
3. skewY() : Sets a tilt of the element along the Y-axis..
transform: scale(2); transform: scale3d(2,1,3); transform: scaleX(2); transform: scaleY(2); transform: scaleZ(2);

These features change the dimensions of the element by making it larger or smaller.
Scale(), scaleX() and scaleY() act in the plane of the screen, i.e. in 2D, while scale3d() and scaleZ() act in 3D.

Refer to the description of the scaling features for more information:
1. scale() : Sets a magnification or reduction of the element..
2. scale3d() : Sets 3D scaling..
3. scaleX() : Sets X-axis scaling..
4. scaleY() : Set Y-axis scaling..
5. scaleZ() : Set Z-axis scaling..
transform: perspective(50px) rotateY(-5deg);

The perspective() function is used with one or more other transformation functions. It defines the perspective effect for the transformed element using a 3D method.

See the description of the perspective() function.
transform: matrix(1, 2, 0.5, 0.25, 1, 1); transform: matrix3d(1, 0.5, ...);

These functions, which are quite complex to use, allow you to define any transformation or succession of transformations.
See the description of the matrix() and matrix3d() functions.
transform: perspective(50px) translateX(20px) rotateZ(45deg);

Several successive transformations can be applied to the element: it is enough to enumerate them separated by a space.

The order in which the transformations are cited influences the final result.
If the perspective() function is used in a series of transformations, it should be cited first.

Common values:


transform: initial  (none)
transform: inherit
transform: revert
transform: revertLayer
transform: unset

These values are described in more detail on their respective page: initial, inherit, revert, revert-layer, unset.

Animation of the `transform` property.

The animation possibilities with the transform property and all transform functions are countless – let your imagination run wild.

Manipulating the `transform` property programmatically.

With Javascript, change the value of `transform`.

In Javascript, two syntaxes are possible to modify the value of transform for an el element. The first syntax uses an array-like notation, with square brackets, while the second syntax is more of an object-type notation.


	let el = document.getElementById('id');
	el.style['transform'] = 'rotate(45deg)';
	// or
	let el = document.getElementById('id');
	el.style.transform = 'rotate(45deg)';

With Javascript, read the value of `transform`.

Here's a code to read the value of transform. The property must have been assigned directly to the element itself, via its style, not via a CSS selector. The value of transform is returned in the form that was used to define it in the style sheet.


	let el = document.getElementById('id');
	let value = el.style['transform'];
	// or
	let el = document.getElementById('id');
	let value = el.style.transform;

With Javascript, read the calculated value of `transform`.

Finally, here's some Javascript code to read the calculated value of transform. The value is returned in the form matrix() (6 values) if the current transformation is in the screen plane (2D transformation), or in the form matrix3d() (16 values) if it is a 3D transformation.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('transform');

With JQuery, write or reread the value of `transform`.

Using JQuery, here are code examples to modify and read the computed value of the transform property. As in Javascript, the value returned is in the form of a matrix() or matrix3d() function.


 $('#id').css('transform', 'rotate(45deg)');


	let value = $('#id').css('transform');

Other code examples.

More examples of Javascript and JQuery code are given on the Javascript and CSS page.

Test it yourself.

The buttons below apply the entered value to the transform property and then display either the value as applied, or the calculated value. This second option allows you to see how the value of transform is stored (serialized). In particular, we note that all transformations are stored as the matrix() or matrix3d() function.

Browsers compatibility with `transform`.

It is important to distinguish between 2D transformations, i.e. in the plane of the screen (X and Y axes), and 3D transformations, which can be about the Z-axis, as well as perspective effects. But in any case, all current browsers handle transformations correctly.

Column 1

General support for 2D transformations, including rotations, element translations, and more

Column 2

General support for 3D animations, including support for perspective management and support for the backface-visibility property.

Notes:

(1) Does not support 2D transformations on SVG elements. Use the transform attribute instead.

(2) Internet Explorer does not support transform-style:preserve-3d, thus limiting the nesting of animations.

2D
transformations

3D
transformations

Estimated overall support.

97%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the `transform` property.

CSS Transforms Module Level 1

First definition of CSS transformations (in 2D) and introduction of the transform property.

February 28, 2012
Working Draft.
February 14, 2019
Candidate Recommendation.
CSS Transforms Module Level 2

Introduction of 3D transformations, but no changes directly affecting the transform property.

March 03, 2020
Working Draft.