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-functions|initial|inherit;
Property Values
| Value | Description |
|---|---|
| none | Defines that there should be no transformation |
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values |
| matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
Defines a 3D transformation, using a 4x4 matrix of 16 values |
| translate(x,y) | Defines a 2D translation |
| translate3d(x,y,z) | Defines a 3D translation |
| translateX(x) | Defines a translation, using only the value for the X-axis |
| translateY(y) | Defines a translation, using only the value for the Y-axis |
| translateZ(z) | Defines a 3D translation, using only the value for the Z-axis |
| scale(x,y) | Defines a 2D scale transformation |
| scale3d(x,y,z) | Defines a 3D scale transformation |
| scaleX(x) | Defines a scale transformation by giving a value for the X-axis |
| scaleY(y) | Defines a scale transformation by giving a value for the Y-axis |
| scaleZ(z) | Defines a 3D scale transformation by giving a value for the Z-axis |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| rotate3d(x,y,z,angle) | Defines a 3D rotation |
| rotateX(angle) | Defines a 3D rotation along the X-axis |
| rotateY(angle) | Defines a 3D rotation along the Y-axis |
| rotateZ(angle) | Defines a 3D rotation along the Z-axis |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |
| perspective(n) | Defines a perspective view for a 3D transformed element |
| initial | Specifies that the value of the property should be set to the default value |
| inherit | Specifies that the value of the property should be inherited from the parent element |
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: rotate(30deg); |
|
transform: rotate(30deg); |
|
transform: scale(1.9) |
|
transform: scale(1.9); |
|
transform: scale(1.9); |
|
transform: skew(50deg) |
|
transform: skew(50deg); |
|
transform: skew(50deg); |
|
Browser Support
Transform (2D)
| Chrome | Firefox | IE | Safari | Opera |
|---|---|---|---|---|
| 36.0
4.0 -webkit- |
16.0
3.5 -moz- |
10.0
9.0 -ms- |
3.2 -webkit | 23.0
15.0 -webkit- 10.5 -o- |
Transform (3D)
| Chrome | Firefox | IE | Safari | Opera |
|---|---|---|---|---|
| 36.0
12.0 -webkit- |
16.0
10.0 -moz- |
10.0 | 4.0 -webkit | 23.0
15.0 -webkit- |
Miscellaneous Information
| Inherited: | No |
|---|---|
| Defined In: | Mozilla Specific |
| Default Value: | none |
