Introduction to CSS Transforms
CSS Transforms are used to change how an element appears(looks) on a webpage.
It does not change the element in HTML, it only changes its visual display(what we see).
With CSS Transforms, we can:
- Move an element
move(shift) the element to another place on the screen - Rotate an element
rotate(turn) the element around a point - Change the size of an element
scale(make bigger) or scale(make smaller) - Slant (skew) an element
skew(tilt) the element so its sides are not straight - Create 3D rotation or movement
3D transform(make the element look near or far, as if it has depth)
So, CSS Transform only changes appearance(look), not the real structure(code).
transform Property
The transform property in CSS is used to apply the transform actions on an element.
This property tells the browser what type of change we want to make to the element’s appearance(look).
Syntax of Transform
selector {
transform: function(value);
}
Example:
.box {
transform: scale(1.5);
}scale(1.5) = make the element 1.5 times larger.
You can combine:
.box {
transform: translate(30px, 20px) rotate(20deg) scale(1.3);
}Example with multiple:
transform: translate(50px, 20px) scale(1.5) rotate(20deg);This means:
- Move the element
- Make it bigger
- Rotate(turn) it
All in one line.
Difference Between 2D and 3D Transforms
2D Transform
2D means two-dimensional (flat).
It changes the element only on:
- X axis (left-right direction)
- Y axis (up-down direction)
There is no depth.
2D transform functions:
| Function | Simple Meaning | Example |
| translate(x, y) | Move element position(move place) | transform: translate(50px, 20px); |
| rotate(angle) | Rotate(turn) the element | transform: rotate(30deg); |
| scale(x, y) | Change size(make big or small) | transform: scale(2, 2); |
| skew(x, y) | Slant(tilt) the element | transform: skew(20deg, 0deg); |
Example:
transform: translate(50px, 20px);3D Transform
3D means three-dimensional (has depth).
The element appears to move forward or backward.
3D adds one more axis:
- Z axis = depth axis (near or far)
3D transform functions:
| Function | Simple Meaning | Example |
| rotateX(angle) | Rotate(turn) around X-axis (up/down tilt) | transform: rotateX(45deg); |
| rotateY(angle) | Rotate(turn) around Y-axis (left/right tilt) | transform: rotateY(45deg); |
| rotateZ(angle) | Rotate(turn) same as normal rotate | transform: rotateZ(45deg); |
| translateZ(value) | Move forward or backward(depth) | transform: translateZ(50px); |
Example:
transform: rotateX(45deg);