Style transform Property
Style transform Property
The transform property is used to apply a 2D or 3D transformation to an element. It allows us to scale, rotate, move, skew, translate, etc the elements.
Syntax:-
Its syntax is:- object.style.transform OR object.style.transform = none | transform-functions | initial | inherit
Return:-
Its return is:- string having transform property of an element
Further Explanation:-
Value | Description |
---|---|
none | No transformation. |
matrix(n, n, n, n, n, n) | Defines 2D transformation by using matrix of six values. |
matrix3d(n, n, n, n, etc....) | Defines 3D transformation by using a 4x4 matrix of 16 values. |
translate(x, y) | Defines 2D translation. |
translate3d(x, y, z) | Defines 3D translation. |
translateX(x) | Defines translation by using only X-axis. |
translateY(y) | Defines translation by using only Y-axis. |
translateZ(z) | Defines 3D translation by using only Z-axis. |
scale(x, y) | Defines 2D scale transformation. |
scale3d(x, y, z) | Defines 3D scale transformation. |
scaleX(x) | Defines scale transformation by giving value for X-axis. |
scaleY(y) | Defines scale transformation by giving value for Y-axis. |
scaleZ(z) | Defines 3D scale transformation by giving value for Z-axis. |
rotate(angle) | Defines 2D rotation by angle. |
rotate3d(x, y, z, angle) | Defines 3D rotation. |
rotateX(angle) | Defines 3D rotation along the X-axis. |
rotateY(angle) | Defines 3D rotation along the Y-axis. |
rotateZ(angle) | Defines 3D rotation along the Z-axis. |
skew(x-angle, y-angle) | Defines 2D skew transformation along X- and Y-axis. |
skewX(angle) | Defines 2D skew transformation along X-axis. |
skewY(angle) | Defines 2D skew transformation along Y-axis. |
perspective(n) | Defines perspective view for 3D transformed element. |
initial | Sets property to its default value. |
inherit | Inherits property from its parent element. |