CSS ट्रांसफ़ॉर्म
Transitions बताते हैं बदलाव कितनी देर ले। Transform तय करता है पिक्सel कहाँ जाएँ — chip खिसकाना, loader आइकन घुमाना, hover पर badge बड़ा करना — अक्सर margin/top जैसे पड़ोसी नहीं हिलते।
transform क्या बदलता है
transform पेंट की गई box पर 2D (बाद में 3D) मैप लगाता है। layout में जगह अक्सर वही रहती है। translate() छोटी motion के लिए: hover, open/close, fine-tune।
एक property, कई functions — एक transform value में comma-list नहीं; space से chain करें: transform: translateX(1rem) rotate(8deg) scale(1.05);
मुख्य 2D functions
📊 2D transform functions — संक्षेप
| Function | सामान्य काम |
|---|---|
translate(x, y) / translateX / translateY |
बिना reflow drama के हटाना |
rotate(कोण) |
आइकन/तीर घुमाना (deg, turn) |
scale(x, y) / scale(n) |
hover emphasis — संयम से |
skew(x, y) |
कम skew — छोटे कोण |
कोण deg या turn में। translate() के % तत्व के अपne size से।
पहले translate
छोटा visual nudge चाहिए तो top/margin से पहले translate। पिछle transition lesson के साथ motion smoother रहती है।
.chip {
display: inline-block;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: #e0e7ff;
color: #1e3a8a;
transition: transform 0.2s ease, background-color 0.2s ease;
}
.chip:hover,
.chip:focus-visible {
transform: translateY(-0.15rem);
background: #c7d2fe;
}
Chip ऊपर दिखता है; line box नहीं हिलती। negative margin-top से पड़ोसी कूदते हैं — compare करें।
rotate + scale
Badge/icon पर छोटा scale + rotate। tight angles professional रखte हैं।
.badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.875rem;
transition: transform 0.25s ease;
}
.badge:hover {
transform: scale(1.06);
}
.chevron {
display: inline-block;
transition: transform 0.2s ease;
}
.menu-open .chevron {
transform: rotate(180deg);
}
scale(1.06) emphasis; scale(2) गलती। rotate(180deg) = opened — class toggle से।
transform-origin
Default pivot center। transform-origin pivot बदलता है — door जैसा bottom-left, tab के लिए 50% 100%।
.panel-tilt {
transform-origin: 50% 100%;
transition: transform 0.35s ease;
}
.panel-tilt.is-open {
transform: rotateX(12deg);
}
हल्का rotateX शब्दावली के लिए। पूरा 3D optional 3D Transforms में — यहाँ origin सीख।
transition के साथ; layout avoid
Base rule पर transition; transform/opacity animate करें। prefers-reduced-motion: reduce मानें।
खud try
translateY(-0.2rem)vsmargin-top।.is-openपर chevron180deg।transform-origin: left center+ छोटाrotate।- एक
transformमेंtranslateX(0.5rem) scale(1.04)। - reduced motion emulate।
गलतियाँ
- lift के लिए
translateकी जगहtop/margin - बड़े wrapper पर
rotate(45deg) transform-originभूलना- accessibility बिना
scale(0) - जरूरत से ज़्यादा 3D
सार
transformpainted box हिलाता है; flow अक्सर same- functions एक transform में chain
transform-origin= pivot- transition जोड़ें
- अगला: CSS Animations (
@keyframes)
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी