Transform scale Property in CSS
Transform Scale
The scale() method increases or decreases the size of an element, according to the parameters given for the width and height. 1 stands for the original size, 2 for twice the original size, and so on.
Multiple Transforms
Multiple transforms can be used at once. Rotating and scaling the size of an element at the same time is an example of that. Applying multiple transforms to an element is simple; just separate them using spaces.
Syntax:-
Its syntax is:-
< style >
element{
transform: scale3d(x,y,z)| scaleX(x)| scaleY(x)| scaleZ(x)| translateX(x)| translateY(x)| translateZ(x);
}
< /style >
Further Explanation:-
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 | Sets this property to its default value. |
inherit | Inherits this property from its parent element. |