CSS transform Property
CSS's transform property is used to alter the visual formatting model's coordinate space. This is used to apply effects to elements such as skew, rotate, translate, and so on.
A stacking context will be created if the property has a value other than none. In this case, the element will function as a containing block for any position: fixed; or position: absolute; elements it contains.
Syntax
Property Values
| Value | Description |
|---|---|
| none | This specifies that there should be no transformation. |
| matrix (n,n,n,n,n,n) | Uses a six-valued matrix to define a 2D transformation. |
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Uses a 4x4 matrix of 16 values to define a 3D transformation. |
| translate(x,y) | Defines a two-dimensional translation. |
| translate3d(x,y,z) | Defines a three-dimensional translation. |
| translateX(x) | Defines a translation using only the X-axis value. |
| translateY(y) | Defines a translation using only the Y-axis value. |
| translateZ(z) | Defines a 3D translation using only the Z-axis value. |
| scale(x,y) | This function defines a 2D scale transformation. |
| scale3d(x,y,z) | This function defines a 3D scale transformation. |
| scaleX(x) | Gives a value for the X-axis to define a scale transformation. |
| scaleY(y) | Gives a value for the Y-axis to define a scale transformation. |
| scaleZ(z) | Gives a value for the Z-axis to define a 3D scale transformation. |
| rotate(angle) | The angle is specified in the parameter, which defines a 2D rotation. |
| rotate3d(x,y,z,angle) | Defines a three-dimensional rotation. |
| rotateX(angle) | This function defines a 3D rotation along the X-axis. |
| rotateY(angle) | This function defines a 3D rotation along the Y-axis. |
| rotateZ(angle) | This function defines a 3D rotation along the Z-axis. |
| skew(x-angle,y-angle) | This function defines a 2D skew transformation along the X and Y axes. |
| skewX(angle) | This function defines a 2D skew transformation along the X-axis. |
| skewY(angle) | This function defines a 2D skew transformation along the Y-axis. |
| perspective(n) | A perspective view for a 3D transformed element is defined. |
| initial | This property is set to its default value. |
| inherit | This property is inherited from its parent element. |
Supported Browsers
| Property | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| transform |
36.0
4.0 -webkit- |
16.0
3.5 -moz- |
9.0
3.2 -webkit- |
10.0
9.0 -ms- |
23.0
15.0 -webkit- 10.5 -o- |