Blog

CSS Transforms Property Kya Hoti Hai – What is CSS Transforms Property

CSS Transforms Property Kya Hoti Hai ?

CSS Transforms ek powerful feature hai jo kisi element ko visually modify karne ki suvidha deta hai bina uski actual layout ko badle. Yeh humein kisi bhi HTML element ko rotate (ghumane), scale (size badalne), translate (position shift karne) aur skew (tilt ya jhukane) ki anumati deta hai. CSS Transforms do prakar ke hote hain: 2D Transforms aur 3D Transforms.

1.  2D Transforms – (Do Dimenshans Me Badlav ):

2D Transforms kisi element ko X aur Y axis par transform karte hain. Yeh transformation flat surface par hote hain aur depth ka koi effect nahi hota.

2D Transform Properties:

1. rotate(deg) –

CSS me rotate(deg) ek transformation function hai jo kisi element ko specified degree me clockwise ya counterclockwise ghumata hai. Yeh transform property ke andar use hota hai aur kisi bhi HTML element ko 2D ya 3D space me rotate karne ke liye kaam aata hai.

    • Example: transform: rotate(45deg); – Element 45° ghoom jayega.

2. scale(x, y) –

CSS scale(x, y) ek transform function hai jo kisi element ka size horizontally (x-axis) aur vertically (y-axis) scale karne ke liye use hota hai. Yeh function kisi bhi element ko chhota ya bada karne me madad karta hai bina uske original position ko badle.

    • Example: transform: scale(1.5, 1.5); – Element 1.5x bada ho jayega.

3. translate(x, y) –

CSS translate(x, y) ek 2D transformation function hai jo kisi element ko X-axis aur Y-axis par shift karne ke liye use hota hai. Yeh CSS transform property ka ek part hai, jo kisi element ko move karne ke liye bina uski actual position (layout) ko affect kiye kaam karta hai.

      • Example: transform: translate(50px, 100px); – Element 50px right aur 100px niche shift ho jayega.

4. skew(x-deg, y-deg) –

skew(x-deg, y-deg) ek CSS transform function hai jo kisi element ko tilt (jhookna ya tedha hona) effect dene ke liye use hota hai. Yeh element ko X-axis (horizontal) aur Y-axis (vertical) ke along distort karta hai.

Agar hum sirf ek value dete hain (skew(30deg)), toh woh X-axis par skew karega, aur agar do values dete hain (skew(30deg, 10deg)), toh woh X aur Y dono axes par skew karega.

        • Example: transform: skew(30deg, 10deg); – Element X direction me 30° aur Y direction me 10° tilt hoga.

2.  3D Transforms – Teen Dimenshans Me Badlav

3D Transforms ek advanced CSS feature hai jo kisi bhi HTML element ko X, Y, aur Z axis par manipulate karne ki anumati deta hai. Iska sabse bada fayda yeh hai ki yeh depth (gehrayi) ka illusion create karta hai, jo elements ko real-world 3D effect me dikhane me madad karta hai. Jab hum kisi element par 3D transformation apply karte hain, to wo sirf position change nahi karta, balki ek realistic perspective aur rotation ka effect bhi dikhata hai.

3D Transforms ka upyog animated effects, interactive elements, aur visually appealing web designs me hota hai. Yeh especially games, UI elements, aur hover effects me kaafi useful hai.

3D Transform Properties

1. perspective(value)

perspective ek bahut hi important property hai jo 3D elements ko realistic banane ke liye use hoti hai. Jab hum ek element par 3D transformation lagate hain, to bina perspective ke wo flat dikhai dega. Perspective property ek illusion create karti hai jisse elements door aur paas dikhai dete hain, jaise hum real life me dekhte hain.

Kaam Kaise Karta Hai?

  • Jab hum perspective ka low value set karte hain (e.g., perspective: 100px;), to element zyada distorted aur zoomed-in lagega.
  • Jab hum high value set karte hain (e.g., perspective: 1000px;), to element zyada natural aur door dikhega.
.container {
  perspective: 500px;
}

Is code ka result yeh hoga ki jo bhi 3D transformed elements is container ke andar honge, unme ek depth effect dikhega aur wo doori ke hisaab se size me chhote ya bade lagenge.

2. rotateX(deg) – X-Axis Par Ghumana

rotateX() kisi element ko horizontal axis (X-axis) par rotate karta hai. Yeh effect tab useful hota hai jab aap kisi element ko upar ya neeche tilt karna chahte hain, jaise flip effect ya 3D card rotation.

Kaam Kaise Karta Hai?

  • Positive values (+ve degrees) – Element peeche (backward) tilt hota hai.
  • Negative values (-ve degrees) – Element aage (forward) tilt hota hai.
.box {
  transform: rotateX(60deg);
}

Is example me element 60° peeche tilt hoga, jo ek folded paper jaisa effect create karega.

3. rotateY(deg) – Y-Axis Par Ghumana

rotateY() kisi element ko vertical axis (Y-axis) par rotate karta hai. Iska upyog side-to-side rotation aur flip effects ke liye hota hai.

Kaam Kaise Karta Hai?

  • Positive values (+ve degrees) – Element right side (dahine) rotate hota hai.
  • Negative values (-ve degrees) – Element left side (baayen) rotate hota hai.
.box {
  transform: rotateY(90deg);
}

Is code se element Y-axis par 90° ghoom jayega, jo ek side view effect create karega.

4. rotateZ(deg) – Z-Axis Par Ghumana

rotateZ() kisi element ko Z-axis par rotate karta hai, jo 2D rotation jaisa hota hai. Iska upyog zyadatar tilt effects aur diagonal animations ke liye hota hai.

Kaam Kaise Karta Hai?

  • Positive values (+ve degrees) – Element clockwise (ghadi ki disha me) rotate hota hai.
  • Negative values (-ve degrees) – Element anti-clockwise (ghadi ki ulta disha me) rotate hota hai.
.box {
  transform: rotateZ(45deg);
}

Is code ka effect yeh hoga ki element Z-axis par 45° clockwise tilt hoga, jaise ek diamond shape me ho.

3D Transforms Ka Upyog Kahaan Karein?

  • Hover Effects: Jab user kisi button ya card par mouse le jaye, to wo 3D effect me move ho.
  • Interactive UI Elements: Websites me flipping cards, rotating text, aur pop-up animations ke liye.
  • Gaming & Animation: Web-based games aur interactive storytelling me 3D depth add karne ke liye.
  • Image Galleries: 3D carousel aur image rotations ke liye.

Agar aap apni website ko aur interactive, engaging aur professional banana chahte hain, to CSS 3D Transforms ka upyog ek best technique hai!

Quiz: Test Your Knowledge on CSS Grid Property

Bonus: Practical Application!

CSS Grid Property ko sahi tareeke se samajhne ke liye different features jaise grid-template-rows, grid-template-columns, gap, justify-items, aur align-items ka upayog karein aur apne webpage ke layout ko aur bhi effective banayein.

Leave a Reply