CSS ट्रांसफ़ॉर्म जनरेटर
किसी CSS transform को दृश्य रूप से बनाएँ। translate, rotate, scale और skew के लिए
स्लाइडर खींचें, perspective के साथ 3D rotateX/rotateY जोड़ें,
transform-origin सेट करें, flip, tilt और grow प्रीसेट आज़माएँ, फिर तैयार-उपयोग वाली
CSS कॉपी करें। सब कुछ आपके ब्राउज़र में चलता है — कुछ भी अपलोड नहीं होता।
3D ट्रांसफ़ॉर्म
इस CSS ट्रांसफ़ॉर्म जनरेटर का उपयोग कैसे करें
- इसे खिसकाएँ — बॉक्स को सरकाने के लिए Translate X/Y इस्तेमाल करें। translate कभी अपने आसपास के लेआउट को नहीं बदलता, इसलिए पेज पर बाक़ी कुछ नहीं हिलता।
- इसे घुमाएँ — Rotate (Z) बॉक्स को स्क्रीन के तल में घुमाता है। यह transform-origin के चारों ओर घूमता है, जो शुरुआत में केंद्र पर होता है।
- इसका आकार बदलें — Scale X/Y बॉक्स को खींचते या सिकोड़ते हैं; ऋणात्मक मान इसे मिरर कर देता है। समान आकार-बदलाव के लिए दोनों को बराबर सेट करें।
- इसे तिरछा करें — Skew X/Y बॉक्स को समांतर चतुर्भुज में झुका देते हैं।
- 3D में जाएँ — 3D ट्रांसफ़ॉर्म खोलें, Perspective को शून्य से ऊपर उठाएँ, फिर गहराई के लिए Rotate X/Y और Translate Z इस्तेमाल करें। आउटपुट में perspective हमेशा सबसे पहले लिखा जाता है।
- CSS कॉपी करें — कॉपी पर क्लिक करें और
transformनियम अपनी स्टाइलशीट में पेस्ट करें।transform-originपंक्ति केवल तभी जोड़ी जाती है जब आप ऑरिजिन बदलते हैं।
transform फ़ंक्शन संदर्भ
| फ़ंक्शन | उदाहरण | यह क्या करता है |
|---|---|---|
| translate() | translate(20px, -10px) | एलिमेंट को X और Y से खिसकाता है। translateX()/translateY() एक अक्ष पर काम करते हैं। |
| rotate() | rotate(45deg) | transform-origin के चारों ओर 2D तल में घुमाता है। धनात्मक मान दक्षिणावर्त है। |
| scale() | scale(1.2, 0.8) | आकार बदलता है। एक मान दोनों अक्षों को स्केल करता है; ऋणात्मक मान उस अक्ष को फ़्लिप कर देता है। |
| skew() | skewX(12deg) | एलिमेंट को X और/या Y के साथ समांतर चतुर्भुज में झुकाता है। |
| rotateX() / rotateY() | rotateY(40deg) | किसी 3D अक्ष के चारों ओर घुमाता है। त्रि-आयामी दिखने के लिए perspective चाहिए। |
| translateZ() | translateZ(30px) | 3D स्थान में दर्शक की ओर (धनात्मक) या दूर (ऋणात्मक) खिसकाता है। |
| perspective() | perspective(500px) | 3D दृश्य की गहराई। सूची में पहला फ़ंक्शन होना चाहिए; छोटा = अधिक नाटकीय। |
| matrix() | matrix(1,0,0,1,0,0) | निम्न-स्तरीय 2D रूप जिसमें हर दूसरा फ़ंक्शन आख़िरकार संकलित होता है। |
इकाइयाँ मायने रखती हैं: translate दूरियाँ एक <length> (px, %, em…) लेती हैं, rotate/skew एक <angle> (deg, rad, turn) लेते हैं, और scale एक इकाई-रहित संख्या लेता है।
आम transform पैटर्न
- पूर्ण केंद्रण — किसी एलिमेंट को 50%/50% पर रखें, फिर
transform: translate(-50%, -50%)उसे उसके अपने आकार के आधे से पीछे खींच लेता है ताकि वह किसी भी आयाम में ठीक केंद्र में बैठे। - होवर पर बड़ा होना —
:hoverपरtransform: scale(1.05)एक हल्का उभार देता है; चूँकि scale कॉम्पोज़िट होता है, यह सहज बना रहता है। - किसी आइकन को मिरर करना —
scaleX(-1)एक ही फ़ाइल को दोनों दिशाओं के लिए दोबारा इस्तेमाल करता है (उदाहरण के लिए बाएँ/दाएँ तीर)। - टिल्ट / 3D कार्ड —
perspective(800px) rotateY(15deg)किसी प्रोडक्ट कार्ड को एक हल्का त्रि-आयामी झुकाव देता है। - फ़्लिप कार्ड — दोनों फलकों पर
backface-visibility: hiddenके साथ किसी फलक कोrotateY(180deg)घुमाकर दो-तरफ़ा फ़्लिप बनाएँ। - स्लाइड-इन —
leftको एनिमेट करने के बजायtranslateX(-100%)सेtranslateX(0)तक एनिमेट करें, ताकि हर फ़्रेम में कोई लेआउट दोबारा गणना न हो।
CSS transforms कहाँ से आए
CSS transforms की शुरुआत एक Apple / WebKit फ़ीचर के रूप में हुई। 2D
-webkit-transform प्रॉपर्टी पहली बार 2008 में Safari 3.1 में आई,
और उसके बाद Apple ने iPhone के हार्डवेयर-त्वरित इंटरफ़ेस से प्रेरित होकर Safari 4 (2009) में 3D
transforms और perspective जोड़े। Mozilla ने उसी साल Firefox 3.5 में
-moz-transform जोड़ा, और इस विचार को CSS Transforms विनिर्देश के रूप में
लिखा गया, जिसे W3C ने बाद में 2D और 3D दोनों फ़ीचरों को समेटते हुए एकल CSS Transforms Module
Level 1 में समेकित कर दिया। लगभग 2013 तक हर प्रमुख इंजन इसे बिना प्रीफ़िक्स के समर्थन करने
लगा, और अब यह एक “Baseline, व्यापक रूप से उपलब्ध” फ़ीचर है।
एक महत्वपूर्ण जोड़ काफ़ी बाद में आया। एक दशक से अधिक समय तक गति लागू करने का एकमात्र तरीक़ा
transform शॉर्टहैंड था, जिसका अर्थ था कि किसी एलिमेंट के केवल घुमाव को एनिमेट करने के लिए
भी आपको उसके translate और scale को दोबारा बताना पड़ता था। अलग-अलग transform प्रॉपर्टीज़
— स्वतंत्र प्रॉपर्टीज़ के रूप में translate, rotate और scale
— 2022 में Chrome, Firefox और Safari में Baseline तक पहुँचीं, जिससे आप हर एक को
स्वतंत्र रूप से सेट और एनिमेट कर सकते हैं। ये एक निश्चित क्रम (पहले translate, फिर rotate, फिर scale) में
संयोजित होती हैं और transform प्रॉपर्टी में अब भी सूचीबद्ध किसी भी फ़ंक्शन से पहले लागू होती
हैं।
फ़ंक्शन का क्रम परिणाम क्यों बदल देता है
एक transform फ़ंक्शनों की एक सूची है, और ब्राउज़र उन्हें लिखे गए क्रम में उनके
मैट्रिक्स गुणा करके संयोजित करता है। चूँकि मैट्रिक्स गुणन क्रम-विनिमेय (commutative) नहीं है,
दो फ़ंक्शन आपस में बदलने से आम तौर पर एक अलग चित्र बनता है। जो अंतर्ज्ञान आमतौर पर मदद करता है: हर फ़ंक्शन
उस निर्देशांक-ग्रिड को बदल देता है जिसमें अगला फ़ंक्शन फिर काम करता है, इसलिए सबसे दाएँ
वाला फ़ंक्शन असल में एलिमेंट पर पहले लागू होता है और सबसे बाएँ वाला आख़िर में।
क्लासिक उदाहरण translate बनाम rotate है। transform: translate(100px) rotate(45deg)
एलिमेंट को 100px दाएँ खिसकाता है और फिर उसी जगह घुमाता है, इसलिए वह 100px दाएँ और झुका हुआ पहुँचता है।
transform: rotate(45deg) translate(100px) पहले निर्देशांक-अक्ष घुमाता है, इसलिए इसके बाद वाला
100px translate अब एक विकर्ण के साथ चलता है — एलिमेंट कहीं अलग जगह जा गिरता है। इनमें से कोई
“सही” नहीं है; ये दो अलग-अलग संयोजन हैं। यह जनरेटर एक निश्चित, पूर्वानुमेय क्रम
(perspective, translate, rotate, rotateX, rotateY, translateZ, scale, skew) उत्सर्जित करता है; अगर किसी
डिज़ाइन को कोई विशिष्ट संयोजन चाहिए, तो कॉपी की गई स्ट्रिंग में फ़ंक्शनों को फिर से क्रमबद्ध करें।
perspective और इसे सेट करने के दो तरीक़े
3D घुमाव तब तक सपाट दिखते हैं जब तक आप perspective न जोड़ें, जो ब्राउज़र को बताता है कि
दर्शक स्क्रीन के तल से कितनी दूर है। 300px जैसा छोटा मान कैमरे को पास रख देता है और गहराई को
बढ़ा-चढ़ाकर दिखाता है ताकि कोई घूमा हुआ फलक नाटकीय रूप से फैल जाए; 1500px जैसा बड़ा मान दूर
खड़े होने जैसा है, जो एक हल्का, लगभग समकोणीय झुकाव देता है। इसे शून्य पर सेट करना (इस टूल का डिफ़ॉल्ट) बस
3D गहराई को बंद कर देता है।
इसे लागू करने के दो तरीक़े हैं, और वे एक जैसे नहीं हैं। perspective() फ़ंक्शन
— जिसे यह जनरेटर उत्सर्जित करता है, और जो सूची में पहला आइटम होना चाहिए — उस एक एलिमेंट के
अपने 3D transform पर perspective लागू करता है। किसी पैरेंट पर सेट की गई perspective प्रॉपर्टी उसके सभी वंशजों को एक साझा वैनिशिंग पॉइंट देती है, जो तब चाहिए जब कई
3D कार्ड ऐसे दिखने चाहिए मानो वे एक ही दृश्य में बैठे हों। जब आपको चाहिए कि नेस्टेड एलिमेंट चपटे होने के
बजाय अपनी गहराई बनाए रखें, तो किसी कॉन्टेनर पर इनमें से किसी को transform-style: preserve-3d
के साथ जोड़ें।
प्रदर्शन: transforms ही वह एनिमेशन क्यों हैं जो आप चाहते हैं
एक ब्राउज़र किसी फ़्रेम को चरणों में रेंडर करता है — स्टाइल दोबारा गणना करना, ज्यामिति का लेआउट
करना, पिक्सल पेंट करना, फिर परतों को आपस में कॉम्पोज़िट करना। अधिकांश CSS प्रॉपर्टीज़, यदि एनिमेट की जाएँ,
तो महँगे शुरुआती चरणों को मजबूर करती हैं: width, top या margin
बदलना हर फ़्रेम पर एक लेआउट रिफ़्लो और एक रीपेंट को ट्रिगर करता है। transform
और opacity ख़ास हैं: ब्राउज़र उन्हें कॉम्पोज़िटर थ्रेड को सौंप सकता है और
GPU पर चला सकता है, लेआउट और पेंट को पूरी तरह छोड़ते हुए, यही वजह है कि एनिमेशन सस्ते फ़ोनों पर भी 60fps
पर बने रहते हैं।
व्यावहारिक सार यह है कि गति को transforms के रूप में व्यक्त करें: top/left के
बजाय translate, width/height के बजाय scale। आप
will-change: transform से ब्राउज़र को किसी एलिमेंट को पहले से अपनी परत में प्रोमोट करने का
संकेत दे सकते हैं, पर इसे संयम से इस्तेमाल करें — हर प्रोमोट की गई परत मेमोरी लेती है, और पूरे पेज पर
will-change बिछा देना मदद से ज़्यादा नुक़सान कर सकता है। इसे बस उस एनिमेशन से ठीक पहले जोड़ें
जिसे इसकी ज़रूरत है, और एनिमेशन ख़त्म होने पर हटा दें।
आम ग़लतियाँ (और उनके समाधान)
- लेआउट के हिलने की उम्मीद करना। transform केवल दृश्यात्मक है; एलिमेंट अपना मूल बॉक्स बनाए रखता है। अगर आपको आसपास की सामग्री को रिफ़्लो कराना है, तो transform ग़लत उपकरण है — इसके बजाय बॉक्स मॉडल बदलें।
- transform के बाद धुंधला टेक्स्ट। सब-पिक्सल translate या भिन्नात्मक scale रेंडरिंग को नरम कर सकता है। translate मानों को पूरे पिक्सल पर स्नैप करें, या जहाँ मायने रखे वहाँ साफ़ परत बनाने के लिए
transform: translateZ(0)जोड़ें। - 3D घुमाव सपाट दिखता है। आप perspective भूल गए। बिना perspective के कोई
rotateYबस एलिमेंट को क्षैतिज रूप से दबा देता है; perspective को शून्य से ऊपर उठाएँ। - ग़लत धुरी। किसी अप्रत्याशित बिंदु से झूलता घुमाव आमतौर पर इसका मतलब है कि
transform-originवहाँ नहीं है जहाँ आपने माना था — यह डिफ़ॉल्ट रूप से केंद्र पर होता है, किसी कोने पर नहीं। - क्रम से चौंकना। translate और rotate को ग़लत क्रम में मिलाना किसी एलिमेंट को अप्रत्याशित जगह भेज देता है; याद रखें सबसे दाएँ वाला फ़ंक्शन पहले लागू होता है।
- will-change का अति-उपयोग। कई एलिमेंट पर
will-change: transformस्थायी रूप से छोड़ देना GPU मेमोरी बर्बाद करता है। इसे केवल उसी तक सीमित रखें जो वाक़ई एनिमेट हो रहा है।
अक्सर पूछे जाने वाले सवाल
CSS transform फ़ंक्शन किस क्रम में लागू होते हैं?
किसी transform सूची के फ़ंक्शन उनके मैट्रिक्स को उसी क्रम में गुणा करके जोड़े जाते हैं जिस क्रम में आप उन्हें लिखते हैं, इसलिए क्रम बदलने से परिणाम बदल जाता है। इसे समझने का एक उपयोगी तरीक़ा: हर फ़ंक्शन उस निर्देशांक-तंत्र को बदल देता है जिसे अगला फ़ंक्शन इस्तेमाल करता है, इसलिए सबसे दाएँ वाला फ़ंक्शन असल में एलिमेंट पर सबसे पहले लागू होता है और सबसे बाएँ वाला सबसे आख़िर में। यही वजह है कि "translate(100px) rotate(45deg)" (पहले दाएँ खिसकाओ, फिर उसी जगह घुमाओ) "rotate(45deg) translate(100px)" (पहले अक्ष घुमाओ, फिर अब-घूमे हुए X के साथ खिसकाओ) से अलग दिखता है। यह जनरेटर फ़ंक्शन को एक निश्चित, पठनीय क्रम में लिखता है — perspective, translate, rotate, rotateX, rotateY, translateZ, scale, skew — ताकि आउटपुट पूर्वानुमेय रहे; अगर आपको कोई अलग क्रम चाहिए तो कॉपी की गई स्ट्रिंग को संपादित करें।
क्या CSS transform पेज के लेआउट को बदलता है?
नहीं। transform पूरी तरह दृश्यात्मक है: एलिमेंट अब भी डॉक्युमेंट फ़्लो में अपना मूल बॉक्स घेरता है, इसलिए आसपास के एलिमेंट जगह बनाने के लिए नहीं हिलते और कुछ भी रिफ़्लो नहीं होता। ठीक इसी कारण transforms को एनिमेट करना सस्ता होता है। दो साइड-इफ़ेक्ट जानने लायक हैं: कोई ट्रांसफ़ॉर्म किया गया एलिमेंट एक नया स्टैकिंग कॉन्टेक्स्ट बनाता है (इसलिए z-index उसी के भीतर तय होता है), और "none" के अलावा कोई भी मान एलिमेंट को उसके position:fixed और position:absolute वंशजों के लिए एक कॉन्टेनिंग ब्लॉक बना देता है।
perspective मान किसलिए है, और यह कहाँ लगता है?
perspective ही 3D घुमावों को सपाट के बजाय त्रि-आयामी दिखाता है — यह तय करता है कि दर्शक z=0 तल से कितनी दूर है, इसलिए छोटी संख्या (मान लीजिए 300px) एक तेज़, अधिक नाटकीय फ़ोरशॉर्टनिंग देती है और बड़ी संख्या (1500px) एक हल्की। जब आप perspective() transform फ़ंक्शन का उपयोग करते हैं तो यह सूची में पहला फ़ंक्शन होना चाहिए, यही वजह है कि यह टूल इसे हमेशा सबसे पहले लिखता है। अगर आप कई वंशजों के लिए एक साझा वैनिशिंग पॉइंट चाहते हैं, तो हर वंश पर फ़ंक्शन के बजाय उनके साझा पैरेंट पर "perspective" प्रॉपर्टी का उपयोग करें।
मैं किसी एलिमेंट को क्षैतिज या ऊर्ध्वाधर रूप से कैसे फ़्लिप करूँ?
उस अक्ष पर ऋणात्मक गुणक से स्केल करें। "transform: scaleX(-1)" किसी एलिमेंट को बाएँ-से-दाएँ मिरर करता है (क्षैतिज फ़्लिप), और "scaleY(-1)" उसे ऊपर-से-नीचे मिरर करता है (ऊर्ध्वाधर फ़्लिप)। इसे देखने के लिए यहाँ Flip Horizontal / Flip Vertical प्रीसेट इस्तेमाल करें। किसी आइकन या इमेज को दूसरी फ़ाइल के बिना मिरर करने का मानक, GPU-अनुकूल तरीक़ा ऋणात्मक स्केल है।
transform-origin क्या करता है?
transform-origin वह बिंदु तय करता है जिसके चारों ओर rotate, scale और skew घूमते हैं; यह डिफ़ॉल्ट रूप से एलिमेंट के केंद्र (50% 50%) पर होता है। इसे किसी कोने पर बदल दें तो घुमाव उस कोने से किसी कब्ज़े की तरह झूलता है, या स्केल उसी से बढ़ता है। शुद्ध translate पर इसका कोई दृश्य प्रभाव नहीं पड़ता, क्योंकि किसी एलिमेंट को खिसकाना किसी धुरी पर निर्भर नहीं करता। यह जनरेटर आपको आम ऑरिजिन (केंद्र, चारों भुजाएँ, चारों कोने) चुनने देता है और जब भी यह डिफ़ॉल्ट केंद्र नहीं होता, आउटपुट में एक transform-origin पंक्ति जोड़ देता है।
transform और opacity एनिमेट करने के लिए सबसे अच्छी प्रॉपर्टी क्यों हैं?
आधुनिक ब्राउज़र transform और opacity को कॉम्पोज़िटर (GPU) थ्रेड पर लेआउट दोबारा गणना किए या पिक्सल दोबारा पेंट किए बिना एनिमेट कर सकते हैं, इसलिए वे साधारण डिवाइसों पर भी सहज 60fps तक पहुँच सकते हैं। इसके बजाय width, top या margin जैसी लेआउट प्रॉपर्टी को एनिमेट करना ब्राउज़र को हर फ़्रेम में ज्यामिति दोबारा गणना करने और दोबारा पेंट करने पर मजबूर करता है, जो कहीं अधिक महँगा और अक्सर झटकेदार होता है। व्यावहारिक नियम यह है कि गति और आकार-बदलाव को transforms के रूप में व्यक्त करें — top/left के बजाय translate, width/height के बजाय scale — और "will-change: transform" तभी जोड़ें जब आपको वाक़ई इस संकेत की ज़रूरत हो, क्योंकि इसका अति-उपयोग मेमोरी बर्बाद करता है।