ट्रांसफॉर्म जनरेटर
सीएसएस ट्रांसफॉर्म गुणों को दृश्य रूप से बनाएं और पूर्वावलोकन करें।
सीएसएस ट्रांसफॉर्म एक शक्तिशाली सीएसएस गुण है जो आपको वेब तत्वों को 2डी या 3डी स्पेस में बदलने की अनुमति देता है। अनुवाद, घुमाव, स्केल और तिरछा जैसे परिवर्तनों के माध्यम से, आप गतिशील और इंटरैक्टिव वेब डिज़ाइन बना सकते हैं। वास्तविक समय पूर्वावलोकन के साथ आसानी से वांछित प्रभाव बनाएं।
transform: none;ट्रांसफॉर्म फ़ंक्शन
- • translate(x, y): translate(x, y): तत्व को x, y मात्रा से ले जाएँ
- • scale(x, y): scale(x, y): तत्व को x, y अनुपात से स्केल करें
- • rotate(angle): rotate(angle): तत्व को कोण से घुमाएँ
- • skew(x, y): skew(x, y): तत्व को x, y डिग्री से तिरछा करें
उपयोग युक्तियाँ
- • कई ट्रांसफॉर्म फ़ंक्शन को रिक्त स्थान के साथ जोड़ा जा सकता है
- • ट्रांसफॉर्म-ओरिजिन के साथ परिवर्तन मूल बदलें
- • एनिमेशन प्रभाव बनाने के लिए संक्रमण के साथ उपयोग करें
- • 3डी ट्रांसफॉर्म के लिए परिप्रेक्ष्य गुण का उपयोग करें
🎯 ट्रांसफॉर्म मूल अवधारणाएँ
सीएसएस ट्रांसफॉर्म एक सीएसएस गुण है जो तत्वों के आकार, आकार और स्थिति को बदलता है। यह सामान्य दस्तावेज़ प्रवाह को बाधित किए बिना तत्वों का दृश्य परिवर्तन करने की अनुमति देता है।
मूल सिंटैक्स:
transform: function(value) function(value) ...;📐 ट्रांसफॉर्म फ़ंक्शन विवरण
🔄 अनुवाद (आंदोलन)
- •
translate(x, y): translate(x, y): एक्स, वाई अक्षों के साथ ले जाएँ - •
translateX(x): translateX(x): केवल एक्स अक्ष के साथ ले जाएँ - •
translateY(y): translateY(y): केवल वाई अक्ष के साथ ले जाएँ - •
translate3d(x, y, z): translate3d(x, y, z): 3डी आंदोलन
transform: translate(50px, 100px);📏 स्केल (आकार बदलना)
- •
scale(x, y): scale(x, y): एक्स, वाई अक्षों को स्केल करें - •
scaleX(x): scaleX(x): केवल एक्स अक्ष को स्केल करें - •
scaleY(y): scaleY(y): केवल वाई अक्ष को स्केल करें - • 1 से अधिक बड़ा करता है, 1 से कम छोटा करता है
transform: scale(1.5, 0.8);🔄 घुमाएँ (घूर्णन)
- •
rotate(angle): rotate(angle): जेड अक्ष के चारों ओर घुमाएँ - •
rotateX(angle): rotateX(angle): एक्स अक्ष के चारों ओर घुमाएँ - •
rotateY(angle): rotateY(angle): वाई अक्ष के चारों ओर घुमाएँ - • कोणों के लिए deg, rad, turn इकाइयों का उपयोग करें
transform: rotate(45deg);📐 तिरछा (कतरन)
- •
skew(x, y): skew(x, y): एक्स, वाई अक्षों के साथ तिरछा करें - •
skewX(angle): skewX(angle): एक्स अक्ष के साथ तिरछा करें - •
skewY(angle): skewY(angle): वाई अक्ष के साथ तिरछा करें - • समांतर चतुर्भुज आकार में बदलें
transform: skew(15deg, 5deg);🎨 ट्रांसफॉर्म ओरिजिन (परिवर्तन बिंदु)
ट्रांसफॉर्म-ओरिजिन गुण परिवर्तन मूल बिंदु सेट करता है। डिफ़ॉल्ट तत्व का केंद्र (50% 50%) है।
कीवर्ड का उपयोग करना
transform-origin: top left;प्रतिशत का उपयोग करना
transform-origin: 25% 75%;पिक्सेल का उपयोग करना
transform-origin: 10px 20px;⚡ प्रदर्शन अनुकूलन युक्तियाँ
✅ सिफारिशें
- • केवल ट्रांसफॉर्म और अपारदर्शिता को एनिमेट करें
- • will-change गुण का उपयोग करें
- • 3डी त्वरण (translateZ(0)) का उपयोग करें
- • बेहतर प्रदर्शन के लिए समग्र परतें बनाएं
❌ बचने योग्य बातें
- • चौड़ाई, ऊंचाई को एनिमेट करना
- • बाएँ, शीर्ष स्थितियों को एनिमेट करना
- • अत्यधिक ट्रांसफॉर्म नेस्टिंग
- • अनावश्यक will-change उपयोग
प्रदर्शन अनुकूलन उदाहरण:
.optimized {
will-change: transform;
transform: translateZ(0); /* 3D 가속 */
transition: transform 0.3s ease;
}🎬 एनिमेशन और संक्रमण
ट्रांसफॉर्म का उपयोग सीएसएस ट्रांजिशन और एनिमेशन के साथ चिकनी प्रभाव बनाने के लिए किया जा सकता है।
संक्रमण उदाहरण
.hover-effect {
transition: transform 0.3s ease;
}
.hover-effect:hover {
transform: scale(1.1) rotate(5deg);
}कीफ्रेम एनिमेशन उदाहरण
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce { animation: bounce 1s infinite; }🌐 ब्राउज़र संगतता
सीएसएस ट्रांसफॉर्म सभी आधुनिक ब्राउज़रों में समर्थित है, लेकिन पुराने ब्राउज़रों के लिए विक्रेता उपसर्गों की आवश्यकता हो सकती है।
विक्रेता उपसर्ग उदाहरण:
-webkit-transform: rotate(45deg); /* Safari, Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9 */
transform: rotate(45deg); /* 표준 */🎯 वास्तविक दुनिया के उपयोग के उदाहरण
कार्ड होवर प्रभाव
.card {
transition: transform 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-10px) scale(1.02);
}लोडिंग स्पिनर
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}मोडल प्रवेश प्रभाव
.modal {
transform: scale(0) rotate(180deg);
transition: transform 0.3s ease;
}
.modal.show {
transform: scale(1) rotate(0deg);
}बटन क्लिक प्रभाव
.button {
transition: transform 0.1s ease;
}
.button:active {
transform: scale(0.95);
}🔧 डिबगिंग और विकास उपकरण
ब्राउज़र डेवलपर उपकरण
- • एलिमेंट्स पैनल में वास्तविक समय संपादन
- • गणना किए गए टैब में अंतिम मानों की जाँच करें
- • प्रदर्शन टैब के साथ प्रदर्शन विश्लेषण
- • 3डी व्यू के साथ परत संरचना की जाँच करें
उपयोगी सीएसएस गुण
- •
transform-style: preserve-3d - •
perspective: 1000px - •
backface-visibility: hidden - •
will-change: transform
💡 प्रो टिप्स
प्रदर्शन टिप
जीपीयू त्वरण के लिए समग्र परतें बनाने के लिए transform3d() या translateZ(0) का उपयोग करने से एनिमेशन प्रदर्शन में काफी सुधार हो सकता है।
पहुँच क्षमता टिप
गति के प्रति संवेदनशील उपयोगकर्ताओं के लिए विकल्प प्रदान करने के लिए prefers-reduced-motion मीडिया क्वेरी का उपयोग करें।
डिजाइन टिप
ट्रांसफॉर्म-ओरिजिन को ठीक से सेट करने से अधिक प्राकृतिक परिवर्तन प्रभाव बन सकते हैं।
विकास टिप
जावास्क्रिप्ट एकीकरण को आसान बनाने के लिए सीएसएस चर का उपयोग करके ट्रांसफॉर्म मानों को गतिशील रूप से नियंत्रित करना।