CSS Transforms Property Kya Hoti Hai?

Introduction to CSS Transforms

CSS transform property ek powerful feature hai jo kisi element ke shape, size, aur position ko visually modify karne ki suvidha deta hai, bina uski actual layout space ko badle. Isse aap elements ko rotate (ghumana), scale (chhota-bada karna), translate (move karna), aur skew (tircha karna) jaise effects de sakte hain.

2D Transforms

2D transforms elements ko ek flat, two-dimensional plane (X aur Y axis) par manipulate karte hain.

1. translate()

Yeh function element ko uski current position se move karta hai.

div { transform: translate(50px, 100px); } /* 50px right, 100px down */

2. rotate()

Yeh function element ko clockwise ya counter-clockwise rotate karta hai.

div { transform: rotate(45deg); } /* Clockwise 45 degrees */

3. scale()

Yeh function element ka size badhata ya ghatata hai.

div { transform: scale(1.5); } /* 1.5x bada hoga */

4. skew()

Yeh function element ko X ya Y axis ke along tircha karta hai.

div { transform: skewX(20deg); } /* Horizontally 20 degrees skew */

3D Transforms

3D transforms elements ko three-dimensional space (X, Y, aur Z axis) me manipulate karte hain, jisse depth ka illusion create hota hai.

1. perspective

3D effect ko visible banane ke liye, parent element par perspective property set karni zaroori hai. Yeh depth create karti hai.

.container { perspective: 500px; }

2. rotateX(), rotateY(), rotateZ()

Yeh functions element ko respective axes par rotate karte hain.

div { transform: rotateX(60deg); } /* X-axis ke around rotate */

div { transform: rotateY(60deg); } /* Y-axis ke around rotate */

3. translateZ()

Yeh function element ko Z-axis par (user ke taraf ya user se door) move karta hai.

div { transform: translateZ(-100px); } /* Moves 100px away from the viewer */

Key Takeaways

• transform property se aap elements ko visually manipulate kar sakte hain bina layout ko disturb kiye.
• 2D Transforms: translate(), rotate(), scale(), skew().
• 3D Transforms: rotateX(), rotateY(), translateZ(). 3D effects ke liye parent par perspective zaroori hai.
• Aap multiple transform functions ko ek hi property me space se separate karke chain kar sakte hain (e.g., transform: rotate(45deg) scale(1.2);).