What is Transform Property in CSS
This article about what is transform property in CSS.
Transform property
CSS transform property allows you to transform an HTML element. With the help of the transform property, you can change the position, orientation, size, and slant of an HTML element.
Transform means translate, rotate, scale, and skew
- Translate means changing the position of an HTML element.
- Rotate means changing the orientation of an HTML element.
- Scale means changing the size of an HTML element.
- Skew means changing the slant of an HTML element.
Syntax of the transform property
transform: one or more transform functions + perspective function
| 1D Transform functions | 2D Transform functions | 3D Transform functions |
|---|---|---|
| translateX(x)
translateY(y) translateZ(z) |
translate(x,y) | translate3D(x,y,z) |
| Note : x and y in px or %, z in px | ||
| rotateX(x)
rotateY(y) rotateZ(z) |
rotate(x,y) | rotate3D(x,y,z) |
| Note: x, y, z in deg | ||
| scaleX(x)
scaleY(y) scaleZ(z) |
scale(x, y) | scale3D(x, y, z) |
| Note: x, y, z in number | ||
| skewX(x)
skewY(y) |
skew(x,y) | |
| Note: x, y in deg | ||
We have 1D transform, 2D transform, and 3D transform functions. We also take the help of the perspective function to set the depth. If you want to transform an HTML element (one axis) at a time, then you take the help of the 1D transform function. If you want to transform an HTML element (X and Y axis) at a time, then you take the help of the 1D transform function. If you want to transform an HTML element in (all the axis) at a time, then you take the help of the 3D transform function.
See the above table, the translate Y, translate Y and translate Z fuctions help you in translating an HTML element in XYZ axis independently. If you want to translate an HTML in X and Y axis at a time, then you can take help of translate function. If you want to translate an HTML in all three axis at a time, then you can take help of translate function. While translating x and y value can be in pixels or percentage and z value must be in pixels.
If you want to rotate an HTML elemtnin x,y and z axis independently then you can take help of rotateX, rotateY and rotateZ fuction. same as translate function must be followed by rotate, smale and skew fucntion.
Perspective function: is used to define depth (z in pixels)
Examples of transform property.
Translate
div{
width: 100px;
height: 100px;
background-color: lightblue;
transform: perspective(400px) translateZ(-100px); }Output:
Rotate
div{
width: 100px;
height: 100px;
background-color: lightblue;
transform: perspective(400px) rotate(45deg); }Output:
Scale
div{
width: 100px;
height: 100px;
background-color: lightblue;
transform: perspective(400px) scale(2);
}Output:
Skew
div{
width: 100px;
height: 100px;
background-color: lightblue;
transform: perspective(400px) skew(45deg);
}Output:
