CSS ट्रांसफ़ॉर्म जेनरेटर

CSS transform बनाएं: translate, rotate, scale, skew और 3D perspective जैसे फ़ंक्शन स्लाइडर से सेट करें, transform-origin चुनें और लाइव प्रीव्यू देखें।

प्रीसेट

2D ट्रांसफ़ॉर्म

X दिशा में खिसकाएँpx

Y दिशा में खिसकाएँpx

घुमाएँdeg

X स्केल

Y स्केल

X तिरछापनdeg

Y तिरछापनdeg

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

पर्सपेक्टिवpx

X अक्ष पर घुमाएँ (झुकाव)deg

Y अक्ष पर घुमाएँ (मोड़)deg

Z दिशा में खिसकाएँ (गहराई)px

पर्सपेक्टिव 0 का मतलब कोई नहीं। बिना पर्सपेक्टिव के 3D रोटेशन सपाट दिखते हैं।

ट्रांसफ़ॉर्म ओरिजिन

स्थिति X%

स्थिति Y%

प्रीव्यू

डैश वाली रूपरेखा बिना बदलाव वाला एलिमेंट दिखाती है; लाल बिंदु ट्रांसफ़ॉर्म ओरिजिन है।

CSS कोड

transform: none;

CSS ट्रांसफ़ॉर्म जेनरेटर क्या है?

यह स्लाइडर से CSS transform फ़ंक्शन को मिलाता है: 2D translate, rotate, scale और skew, तथा 3D perspective, rotateX, rotateY और translateZ। प्रीव्यू में डैश्ड आउटलाइन मूल स्थिति दिखाती है और लाल बिंदु ट्रांसफ़ॉर्म ऑरिजिन को।

CSS ट्रांसफ़ॉर्म जेनरेटर का उपयोग कैसे करें

कोई प्रीसेट (3D tilt, Flip, Slanted, Zoom, 3D card) चुनें या None से शुरू करें।
2D transforms में खिसकाव, घुमाव, आकार-परिवर्तन और तिरछापन (Move X/Y, Rotate, Scale X/Y, Skew X/Y) एडजस्ट करें।
3D transforms में गहराई और घुमाव (Perspective, Rotate X, Rotate Y, Move Z) सेट करें।
सूची से घूमने का केंद्र (Transform origin) चुनें या Position X/Y सेट करें।
CSS कोड कॉपी करें।

उदाहरण

इनपुट

Move X 20px, Rotate 45°, Scale X 1.5, Scale Y 1.5

आउटपुट

transform: translate(20px, 0) rotate(45deg) scale(1.5);

CSS ट्रांसफ़ॉर्म जेनरेटर का उपयोग कब करें

इसे होवर इफ़ेक्ट, कार्ड फ़्लिप, तिरछे 3D शोकेस और सटीक पोज़िशनिंग ऑफ़सेट के लिए इस्तेमाल करें। ट्रांसफ़ॉर्म लेआउट को प्रभावित नहीं करते (आसपास के एलिमेंट नहीं हिलते); लेआउट बदलने के लिए margin, flexbox या grid इस्तेमाल करें। ट्रांसफ़ॉर्म के बीच एनिमेट करने के लिए इसे CSS Animation Generator के साथ जोड़ें।

CSS ट्रांसफ़ॉर्म जेनरेटर कैसे काम करता है

फ़ंक्शन तभी लिखे जाते हैं जब वे न्यूट्रल न हों, इस क्रम में: perspective(), translate(), translateZ(), rotateX(), rotateY(), rotate(), scale(), skew()। ट्रांसफ़ॉर्म एलिमेंट के सापेक्ष दाएँ से बाएँ लागू होते हैं, इसलिए क्रम नतीजा बदल देता है; perspective() को सबसे पहले आना चाहिए ताकि वह उसके बाद के 3D फ़ंक्शन को प्रभावित करे। बराबर X/Y स्केल एक scale(n) के रूप में लिखा जाता है। transform-origin तभी आउटपुट होता है जब वह डिफ़ॉल्ट केंद्र (50% 50%) से अलग हो।