CSS उपकरण/CSS ट्रांसफॉर्म जेनरेटर
CSS ट्रांसफॉर्म जेनरेटर
ट्रांसलेट, रोटेट, स्केल और स्क्यू कंट्रोल के साथ विज़ुअली CSS ट्रांसफॉर्म बनाएं
ट्रांसफॉर्म कंट्रोल
ट्रांसलेट
0px
0px
रोटेट
0°
स्केल
1.0
1.0
1.0
स्क्यू
0°
0°
प्रीसेट
पूर्वावलोकन
एलिमेंट
डैश्ड बॉर्डर मूल स्थिति दिखाता है
CSS कोड
css
Loading...CSS ट्रांसफॉर्म गाइड
CSS ट्रांसफॉर्म और विज़ुअल इफेक्ट्स बनाने के बारे में जानें
CSS Transform क्या है?
CSS ट्रांसफॉर्म आपको एलिमेंट्स को ट्रांसलेट (मूव), रोटेट, स्केल और स्क्यू करके उनकी विज़ुअल प्रेजेंटेशन को संशोधित करने की अनुमति देता है। ट्रांसफॉर्म डॉक्यूमेंट फ्लो को प्रभावित नहीं करते - जब ट्रांसफॉर्म किया गया एलिमेंट विज़ुअली मूव करता है तो अन्य एलिमेंट्स अपनी जगह पर रहते हैं।
ट्रांसफॉर्म फंक्शन
- translate(): एलिमेंट्स को क्षैतिज और लंबवत मूव करें
- rotate(): एलिमेंट्स को केंद्र बिंदु के चारों ओर घुमाएं
- scale(): एलिमेंट का आकार बढ़ाएं या घटाएं
- skew(): X और Y अक्षों के साथ एलिमेंट्स को तिरछा करें
उपयोग कैसे करें
- एलिमेंट को मूव करने के लिए ट्रांसलेट कंट्रोल का उपयोग करें
- एलिमेंट को स्पिन करने के लिए रोटेशन एडजस्ट करें
- एलिमेंट का रीसाइज़ करने के लिए स्केल करें
- परिप्रेक्ष्य ट्रांसफॉर्म के लिए 3D मोड सक्षम करें
सुझाव
- जटिल इफेक्ट्स के लिए कई ट्रांसफॉर्म को संयोजित करें
- पिवट पॉइंट बदलने के लिए transform-origin का उपयोग करें
- 3D ट्रांसफॉर्म को पैरेंट एलिमेंट पर perspective की आवश्यकता है
अक्सर पूछे जाने वाले प्रश्न
translate और position में क्या अंतर है?
translate डॉक्यूमेंट फ्लो को प्रभावित किए बिना एलिमेंट को विज़ुअली मूव करता है - अन्य एलिमेंट्स अपनी जगह पर रहते हैं। position (relative, absolute) लेआउट और सिबलिंग एलिमेंट्स को प्रभावित कर सकता है। translate में GPU एक्सेलेरेशन भी है, जो इसे एनिमेशन के लिए बेहतर बनाता है।
transform origin कैसे बदलें?
पिवट पॉइंट सेट करने के लिए transform-origin प्रॉपर्टी का उपयोग करें। डिफ़ॉल्ट 'center center' है। आप कीवर्ड (top, left, center, right, bottom), प्रतिशत या पिक्सेल वैल्यू का उपयोग कर सकते हैं। उदाहरण के लिए, 'transform-origin: top left' ऊपरी-बाएं कोने से घुमाता है।
मेरा 3D ट्रांसफॉर्म काम क्यों नहीं कर रहा?
3D ट्रांसफॉर्म को गहराई दिखाने के लिए perspective की आवश्यकता होती है। पैरेंट एलिमेंट में 'perspective: 1000px' जोड़ें। यदि आपके पास नेस्टेड 3D ट्रांसफॉर्म हैं तो सुनिश्चित करें कि 'transform-style: preserve-3d' सेट है। perspective वैल्यू 3D इफेक्ट की तीव्रता को नियंत्रित करती है।
क्या मैं ट्रांसफॉर्म को एनिमेट कर सकता हूं?
हां, ट्रांसफॉर्म एनिमेशन के लिए आदर्श हैं। transform प्रॉपर्टी पर CSS ट्रांज़िशन या कीफ्रेम एनिमेशन का उपयोग करें। ट्रांसफॉर्म हार्डवेयर-एक्सेलेरेटेड हैं, जो स्मूथ 60fps एनिमेशन प्रदान करते हैं। सर्वोत्तम प्रदर्शन के लिए 'will-change: transform' के साथ संयोजित करें।
ट्रांसफॉर्म किस क्रम में लागू होते हैं?
ट्रांसफॉर्म दाएं से बाएं लागू होते हैं। 'transform: rotate(45deg) translate(100px)' पहले ट्रांसलेट करता है, फिर रोटेट करता है। क्रम मायने रखता है क्योंकि प्रत्येक ट्रांसफॉर्म बाद के ट्रांसफॉर्म को प्रभावित करता है। ट्रांसलेट फिर रोटेट करने के लिए, 'transform: translate(100px) rotate(45deg)' का उपयोग करें।