CSS Transform — Rotate, Scale, Translate सीखें
4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
मेज़ से एक photo उठाकर उसे थोड़ा घुमाकर रखिए। बाक़ी photos नहीं हिलतीं, मेज़ बड़ी नहीं होती, और photo अब भी उसी जगह पर है — बस टेढ़ी दिखती है। CSS transforms बिल्कुल ऐसे ही काम करते हैं। वे box का दिखावा बदल देते हैं — उसका कोण, उसका आकार, screen पर उसकी जगह — बिना यह बदले कि वह layout में कहाँ रहता है। बाक़ी हर element बिल्कुल वहीं रहता है जहाँ था।
ट्रांसफ़ॉर्म क्या करता है
ट्रांसफ़ॉर्म एक visual effect है, layout में बदलाव नहीं। जब आप किसी box को 20 degree घुमाते हैं, तो browser अब भी उस box की असली, बिना-घुमी जगह को page पर reserve रखता है, और पड़ोसी जगह बनाने के लिए नहीं हिलते। यही बड़ा फ़र्क़ है margin या width बदलने से, जो दूसरे elements को धकेल देते हैं। ट्रांसफ़ॉर्म browser के लिए बनाना भी सस्ता पड़ता है, इसीलिए hover effects और छोटी animations के लिए यही सही औज़ार है।
चार ट्रांसफ़ॉर्म
ट्रांसफ़ॉर्म के चार functions हैं, और आप उन्हें transform property के अंदर लिखते हैं:
.tilted { transform: rotate(20deg); }
.bigger { transform: scale(1.5); }
.moved { transform: translate(30px, 10px); }
.slanted { transform: skewX(-15deg); }
rotate() box को degree के कोण से घुमाता है। scale() उसे बड़ा या छोटा करता है — scale(2) आकार दोगुना कर देता है, scale(0.5) आधा कर देता है। translate() उसे दी गई दो values से दाईं ओर और नीचे सरकाता है। skewX() और skewY() उसे एक तरफ़ झुका देते हैं, जैसे किसी आयत की ऊपरी तरफ़ को धकेलना जबकि नीचे वाली जगह पर ही रहे।
ट्रांसफ़ॉर्म जोड़ना और धुरी बिंदु
आप कई functions को एक ही transform property में रख सकते हैं, space से अलग करके: transform: translate(50px, 0) rotate(20deg);। लेकिन order मायने रखता है — पहले सरकाना फिर घुमाना, और पहले घुमाना फिर सरकाना, अलग नतीजा देते हैं, क्योंकि हर क़दम पिछले क़दम के बचे हुए coordinate system में होता है। धुरी बिंदु transform-origin से तय होता है: default box का केंद्र होता है, लेकिन transform-origin: top left; box को उसके ऊपरी-बाएँ कोने पर घुमाता है, जैसे दरवाज़ा अपने कब्ज़े पर घूमता है।
z-index के भी दूसरे content के ऊपर दिख सकता है। आम तौर पर इससे कोई परेशानी नहीं होती, लेकिन यही वजह है कि कभी घुमा हुआ card उस पड़ोसी पर चढ़ जाता है जिस पर पहले नहीं चढ़ा था।width या padding बदलने के बजाय transform: scale() पसंद कीजिए। ट्रांसफ़ॉर्म से बढ़ने पर page दोबारा नहीं बनता, इसलिए कुछ भी इधर-उधर नहीं उछलता — card बस अपनी जगह पर आराम से बड़ा हो जाता है।आम गलतियाँ
- एक rule में दो
transformlines लिखना — दूसरी जीत जाती है और पहली ignore हो जाती है; उन्हें एक ही line में जोड़िए। - यह सोचना कि
translate()दूसरे elements को सरकाता है — नहीं सरकाता; सिर्फ़ box खुद दिखने में हिलता है, और उसकी असली जगह reserved रहती है। rotate()पर unit भूलना — बिनाdegकेrotate(20)गलत है और browser उसे ignore कर देता है।scale(150%)लिखना — scale सादा number लेता है, इसलिएscale(1.5)सही है, percentage नहीं।- सादे inline element जैसे
spanपर ट्रांसफ़ॉर्म लगाना — non-replaced inline elements पर ट्रांसफ़ॉर्म नहीं लगता; पहले उसेdisplay: inline-blockदीजिए।
याद रखें
- ट्रांसफ़ॉर्म box का दिखावा बदलता है, layout में उसकी जगह नहीं।
rotate()घुमाता है,scale()बड़ा या छोटा करता है,translate()सरकाता है,skew()टेढ़ा करता है।- Functions को एक ही
transformline में जोड़िए; order नतीजा बदल देता है। transform-originधुरी बिंदु तय करता है — default केंद्र, या दरवाज़े के कब्ज़े जैसा कोना।- hover effects के लिए ट्रांसफ़ॉर्म इस्तेमाल कीजिए: वे कभी दूसरे elements को नहीं धकेलते।
उदाहरण समझिए
.rotate { transform: rotate(20deg); }— नीला box 20 degree clockwise घूम जाता है, जबकि row की spacing वही रहती है।.scale { transform: scale(1.2); }— नारंगी box 1.2 गुना बड़ा हो जाता है, लेकिन पड़ोसी जगह बनाने के लिए नहीं हिलते।.translate { transform: translate(20px, 10px); }— गुलाबी box अपनी आम जगह से 20px दाईं ओर और 10px नीचे खिसक जाता है।.skew { transform: skewX(-15deg); }— बैंगनी box एक तरफ़ झुक जाता है, जैसे आयत को ऊपर से धकेल दिया हो।.hover-card:hover { transform: scale(1.1) rotate(-2deg); }— hover पर सफ़ेद card थोड़ा बड़ा होता है और हल्का टेढ़ा होता है, दोनों ट्रांसफ़ॉर्म एक ही line में।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Boxes That Move and Turn</title>
<style>
* { box-sizing: border-box; }
body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f2f2f2; }
h1 { text-align: center; color: #333; }
.row { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; max-width: 900px; margin: auto; }
.box {
width: 150px; height: 150px;
background-color: #04aa6d; color: white;
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: bold; border-radius: 8px;
}
.rotate { transform: rotate(20deg); background-color: #2196f3; }
.scale { transform: scale(1.2); background-color: #ff9800; }
.translate { transform: translate(20px, 10px); background-color: #e91e63; }
.skew { transform: skewX(-15deg); background-color: #9c27b0; }
.hover-card {
width: 200px; height: 120px; background-color: white;
border: 2px solid #04aa6d; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 18px; color: #333; margin: 30px auto;
}
.hover-card:hover { transform: scale(1.1) rotate(-2deg); }
p.note { text-align: center; color: #666; max-width: 600px; margin: 20px auto; }
</style>
</head>
<body>
<h1>Boxes That Move and Turn</h1>
<div class="row">
<div class="box rotate">Rotate 20°</div>
<div class="box scale">Scale 1.2</div>
<div class="box translate">Moved</div>
<div class="box skew">Skewed</div>
</div>
<div class="hover-card">Hover over me</div>
<p class="note">Each box still takes its original space in the row — the transform only changes how it looks, not where it lives. Hover over the white card in a browser and it grows and tilts without pushing anything around.</p>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. CSS transform क्या करता है?
यह बॉक्स का दिखावा बदलता है — उसका angle, size या स्क्रीन पर position — बिना यह बदले कि लेआउट में वह कहाँ है।
2. Rotate, scale और translate क्या करते हैं?
rotate() बॉक्स को घुमाता है, scale() उसे बड़ा या छोटा करता है, और translate() उसे दिखावे में हिलाता है।
3. दो transform लाइनें एक साथ क्यों नहीं चलतीं?
क्योंकि दूसरी वाली जीत जाती है और पहली ignore हो जाती है। सभी फ़ंक्शन्स को एक ही transform लाइन में जोड़ें।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
