2D Transforms in CSS ka use elements ko move, rotate, resize aur skew karne ke liye hota hai using the transform property.
Isse aap elements ko visually change kar sakte ho bina layout ko break kiye.
CSS Transform Property
transform property 2D aur 3D transformations apply karta hai.
2D me mainly ye functions use hote hain:
- translate()
- rotate()
- scale()
- scaleX()
- scaleY()
- skewX()
- skewY()
- skew()
- matrix()
translate() Function
Element ko uski current position se move karta hai.
Example
rotate() Function
Element ko rotate karta hai degrees me.
Example
Negative value → opposite direction
scale() Function
Element ka size increase ya decrease karta hai.
Example
scaleX() and scaleY()
scaleX() → width control karta hai
scaleY() → height control karta hai
skew Functions
Element ko tilt karta hai X ya Y axis par.
skewX()
skewY()
skew()
Agar second value na ho → default 0 hoti hai
matrix() Function
matrix() ek advanced function hai jo saare transforms ko ek hi line me combine karta hai.
Syntax
matrix (scaleX, skewY, skewX, scaleY, translateX, translateY)
Example
2D Transforms in CSS se elements ko easily move, rotate, resize aur skew kiya ja sakta hai. Ye modern UI design me animations aur interactive effects banane ke liye bahut useful hote hain.
