लोड हो रहा है...

CSS 3D ट्रांसफ़ॉर्म

Optional Advanced ने अभी पॉइंटर, caret और नेटिव क्रोम सजाया। यह आखिरी वैकल्पिक पाठ दूसरा टूलकिट है: 3D ट्रांसफ़ॉर्म। कार्ड को लुप्त बिंदु देते हो और गहराई में झुकाते हो। 2D वाले translate / scale होवर पाठ को दोहराते नहीं, और cursor या resize हैंडल भी नहीं चुनते।

सीधा जवाब

CSS 3D ट्रांसफ़ॉर्म वही transform प्रॉपर्टी है जो 2D में थी, प्लस गहराई। perspective पैरेंट पर रखो ताकि बच्चे एक साझा लुप्त बिंदु पाएँ (perspective-origin उस बिंदु को हिलाता है)। rotateX और rotateY क्षैतिज व ऊर्ध्व अक्ष पर झुकाते हैं; rotateZ वही सपाट घुमाव है जो तुम जानते हो। translateZ दर्शक के पास या दूर जाता है। transform-style: preserve-3d बच्चों को एक सीन में रखता है, चपटा नहीं करता। backface-visibility: hidden मुँह पलटने पर चेहरा छिपाता है — दो तरफ़ वाले कार्ड के लिए। लेआउट स्लॉट 2D जैसा ही रहता है। कोण छोटे रखो। prefers-reduced-motion मानो।

यह 2D मोशन या UI क्रोम क्यों नहीं

2D ट्रांसफ़ॉर्म पाठ ने समतल गति सिखाई: translate, rotate, scale, skew और कब्जे के लिए transform-origin। वे अब भी काम करते हैं। 3D कैमरे जैसा perspective और अतिरिक्त अक्ष जोड़ता है। यूज़र इंटरफ़ेस CSS इंटरैक्शन क्रोम था (cursor, resize, caret-color, appearance)। घूमे कार्ड को झूठा हाथ नहीं चाहिए, और textarea हैंडल लुप्त बिंदु नहीं है। सिर्फ़ 2px लिफ़्ट चाहिए तो 2D में रहो।

perspective — कैमरा पैरेंट पर

perspective एक लंबाई है: छोटी वैल्यू पास और नाटकीय; बड़ी ज़्यादा सपाट। इसे स्टेज पर लगाओ, हर फेस पर नहीं, ताकि भाई एक लुप्त बिंदु बाँटें।

Perspective on the parent

css

.stage {
perspective: 800px;
perspective-origin: 50% 40%;
}

.card-3d {
transform: rotateY(18deg);
transform-origin: center;
}

एक एलिमेंट पर transform: perspective(800px) rotateY(18deg) भी लिख सकते हो। वह कैमरा सिर्फ़ उसी बॉक्स का है। घन या टाइल पंक्ति के लिए पैरेंट perspective शांत रहता है। perspective-origin transform-origin का लुप्त-बिंदु चचेरा है — घूमते फेस का पिवोट नहीं बदलता।

अक्ष — rotateX, rotateY, rotateZ

किताब सोचो। rotateY कवर बाएँ–दाएँ खोलता है। rotateX तुम्हारी तरफ़ या दूर झुकाता है। rotateZ पेज पर घुमाता है — वही 2D rotate()।

rotateX rotateY rotateZ

css

.tile-y {
transform: rotateY(-22deg);
}

.tile-x {
transform: rotateX(12deg);
}

.tile-z {
transform: rotateZ(8deg);
}

ज़रूरत हो तो 2D फंक्शन से चेन करो: rotateY(16deg) translateZ(24px)। क्रम मायने रखता है — बाद वाले पहले के लोकल स्पेस में चलते हैं। एक transform सूची काफ़ी, जैसे 2D पाठ में। पूरे लेख पर rotateX(80deg) मेला है, UI नहीं।

translateZ — दूरी, लेआउट धक्का नहीं

perspective के साथ धनात्मक translateZ अक्सर दर्शक की तरफ़ आता है। दस्तावेज़ के पड़ोसी जगह नहीं छोड़ते; सिर्फ़ पेंट चलता है, जैसे 2D translate।

translateZ in a 3D scene

css

.stage {
perspective: 900px;
}

.pop-face {
transform: translateZ(40px) rotateY(-8deg);
}

.back-face {
transform: translateZ(-28px);
}

translateZ सीन के चेहरे अलग करने के लिए है, margin या रोज़मर्रा z-index की नक़ल नहीं। z-index अब भी 2D लेआउट में ओवरलैप बॉक्स क्रम देता है; 3D दूरी दूसरा नॉब है। काम «चिप 2px उठाओ» हो तो 2D पाठ का translateY काफ़ी है।

preserve-3d — सीन रखो, चपटा मत करो

डिफ़ॉल्ट में पैरेंट रूपांतरित बच्चों को चपटा करता है (transform-style: flat)। 3D रिश्ता खो जाता है। घन, परत कवर, या दो तरफ़ कार्ड के लिए घूमते रैपर पर preserve-3d लगाओ।

preserve-3d on the scene

css

.scene {
perspective: 700px;
}

.rig {
transform-style: preserve-3d;
transition: transform 0.45s ease;
}

.rig.is-flipped {
transform: rotateY(180deg);
}

.face {
position: absolute;
inset: 0;
backface-visibility: hidden;
}

जो पूर्वज गहराई रखे, सबको preserve-3d चाहिए — भूला flat पैरेंट घन को पोस्टर बना देता है। आम बँटवारा: बाहरी स्टेज पर perspective, भीतरी रिग पर preserve-3d: कैमरा बाहर, जोड़ भीतर।

backface-visibility — उल्टा छिपाओ

फेस 90° पार करे तो दर्पण दिखेगा। backface-visibility: hidden वह पीठ हटाता है। दो चेहरे जोड़ो: सामने rotateY(0), पीछे rotateY(180deg), दोनों उसी रिग पर position: absolute।

Card flip with backface-visibility

css

.card-rig {
position: relative;
transform-style: preserve-3d;
}

.card-front,
.card-back {
position: absolute;
inset: 0;
backface-visibility: hidden;
}

.card-back {
transform: rotateY(180deg);
}

छिपी पीठ के बिना सामने का भूत दिखता है। यह user-select: none नहीं, appearance: none भी नहीं। तुम 3D में पेंटेड फेस छिपा रहे हो, चेकबॉक्स की खाल नहीं उतार रहे।

3D बनाम 2D ट्रांसफ़ॉर्म बनाम UI क्रोम

📊 3D vs 2D transform vs UI chrome

Tool	Job	Poor fit
`perspective` + `rotateX` / `rotateY` / `translateZ`	गहराई का सीन: झुकाव, दूरी, साझा लुप्त बिंदु	रोज़ 2px होवर लिफ़्ट; पॉइंटर आकार
2D `translate` / `rotate` / `scale` / `skew`	समतल गति; origin कब्जा	बिना preserve-3d घन
`transform-style` / `backface-visibility`	नेस्टेड 3D चेहरे; उल्टी तरफ़ छिपाना	caret रंग; textarea resize
UI (`cursor`, `resize`, `appearance`…)	कंट्रोल पर इंटरैक्शन क्रोम	लुप्त बिंदु; कार्ड फ़्लिप

Optional Advanced पहले कंट्रोल स्टाइल कर चुका। Effects & Motion ने 2D मैपिंग सिखाई। यह पाठ transform पर गहराई की परत है। शीर्षक पर cursor: pointer सिर्फ़ इसलिए कि rotateY है, उसे 3D नहीं बनाता। लॉगिन पर perspective नोट फ़ील्ड के resize की जगह नहीं लेता।

शांत आदतें

UI कार्ड के लिए perspective सैकड़ों पिक्सेल में रखो (600px–1200px समझदार बैंड)। body पर perspective: 40px मत लगाओ। :hover या क्लास को छोटे transition से transform पर जोड़ो — 2D जैसी जोड़ी। prefers-reduced-motion: reduce से शो घटाओ (none या छोटा 2D नज)। कीबोर्ड फ़ोकस को अब भी दिखने वाली रिंग चाहिए; फ़्लिप फ़ोकस स्टाइल नहीं है।

Modest 3D hover not a 2D lift

css

.preview {
perspective: 1000px;
}

.preview .plate {
transition: transform 0.3s ease;
}

.preview:hover .plate {
transform: rotateY(-10deg) rotateX(4deg);
}

@media (prefers-reduced-motion: reduce) {
.preview .plate,
.preview:hover .plate {
transition: none;
transform: none;
}
}

यह होवर झुकाव है, 2D चिप लिफ़्ट translateY(-0.15rem) नहीं, और फ़ील्ड पर resize: vertical भी नहीं। कम मोशन वाले यूज़र स्थिर कार्ड चाहें तो मान लो।

स्वयं आज़माएँ

कार्ड को .stage { perspective: 800px; } में लपेटो और बच्चे पर rotateY(20deg) लगाओ — फिर perspective बच्चे के transform पर ले जाकर भाई टाइल तुलना करो।
दो फेस कार्ड: रिग पर preserve-3d, दोनों फेस पर backface-visibility: hidden, पीछे rotateY(180deg)।
सामने translateZ(32px) दो; देखो लेआउट पड़ोसी नहीं खिसकते।
क्लास + transition: transform से फ़्लिप — फिर prefers-reduced-motion से चपटा।
इसे cursor, resize, या सिर्फ़ 2D translateY होवर से मत हल करो।

आम गलतियाँ

body पर perspective: 50px ताकि पूरा पेज मुड़ जाए
रैपर पर preserve-3d भूलना, फिर घन चपटा देखकर हैरान होना
2D चिप लिफ़्ट (translateY) को 3D पाठ समझना
UI क्रोम (cursor, resize, appearance) को गहराई की जगह लगाना
स्टेज पर backface-visibility, फेस पर नहीं
बड़े rotateY फ़्लिप पर prefers-reduced-motion नज़रअंदाज़
सोचना 3D margin की तरह दस्तावेज़ प्रवाह बदलेगा

सार

3D ट्रांसफ़ॉर्म transform में गहराई जोड़ते हैं: perspective, rotateX / rotateY, translateZ
perspective पैरेंट सीन पर; preserve-3d ताकि नेस्टेड फेस उसी स्पेस में रहें
backface-visibility: hidden मुड़ा चेहरा छिपाता है
न 2D होवर-लिफ़्ट पाठ, न यूज़र इंटरफ़ेस क्रोम
कोण छोटे; कम मोशन का सम्मान
इस कोर्स का आखिरी CSS पाठ — Optional Advanced यहीं खत्म; मैप में और CSS स्लग नहीं

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा