CSS => 2 डी रूपांतरण

वाक्य - विन्यास

घुमाएँ रूपांतरण
परिवर्तन: घुमाएँ (<कोण>)
अनुवाद ट्रांसफ़ॉर्म करें
रूपांतर: अनुवाद (<लंबाई-या-प्रतिशत>> [, <लंबाई-या-प्रतिशत>]?)
रूपांतर: TranslX (<लंबाई-या-प्रतिशत>)
रूपांतर: अनुवाद (<लंबाई-या-प्रतिशत>)
तिरछा रूपांतरण
परिवर्तन: तिरछा (<कोण> [, <कोण>]?)
परिवर्तन: skewX (<कोण>)
परिवर्तन: तिरछा (<कोण>)
स्केल ट्रांसफ़ॉर्म
परिवर्तन: स्केल (<स्केल-फैक्टर> [, <स्केल-फैक्टर>]?]
रूपांतर: स्केलएक्स (<स्केल-फैक्टर>)
रूपांतर: पैमाना (<स्केल-फैक्टर>)
मैट्रिक्स रूपांतरण
परिवर्तन: मैट्रिक्स (<संख्या> [, <संख्या>] {5,5})

पैरामीटर

समारोह / पैरामीटर	विवरण
`rotate(x)`	एक परिवर्तन को परिभाषित करता है जो Z अक्ष पर एक निश्चित बिंदु के आसपास तत्व को स्थानांतरित करता है
`translate(x,y)`	एक्स और वाई अक्ष पर तत्व की स्थिति को आगे बढ़ाता है
`translateX(x)`	एक्स अक्ष पर तत्व की स्थिति को बढ़ाता है
`translateY(y)`	Y अक्ष पर तत्व की स्थिति को बढ़ाता है
`scale(x,y)`	एक्स और वाई अक्ष पर तत्व के आकार को संशोधित करता है
`scaleX(x)`	एक्स अक्ष पर तत्व का आकार संशोधित करता है
`scaleY(y)`	Y अक्ष पर तत्व का आकार संशोधित करता है
`skew(x,y)`	प्रत्येक दिशा में एक निश्चित कोण द्वारा किसी तत्व के प्रत्येक बिंदु को विकृत करते हुए, कतरन या उत्तोलन
`skewX(x)`	क्षैतिज कतरनी मानचित्रण क्षैतिज दिशा में एक निश्चित कोण द्वारा एक तत्व के प्रत्येक बिंदु को विकृत करता है
`skewY(y)`	ऊर्ध्वाधर दिशा में एक निश्चित कोण द्वारा किसी तत्व के प्रत्येक बिंदु को विकृत करते हुए वर्टिकल शीयर मैपिंग
`matrix()`	एक रूपांतरण मैट्रिक्स के रूप में एक 2 डी परिवर्तन को परिभाषित करता है।
कोण	वह कोण जिसके द्वारा तत्व को घुमाया या तिरछा किया जाना चाहिए (उस फ़ंक्शन के आधार पर जिसके साथ इसका उपयोग किया जाता है)। कोण डिग्री (में उपलब्ध कराया जा सकता `deg` ), gradians ( `grad` ), रेडियन ( `rad` ) या बदल जाता है ( `turn` )। `skew()` फ़ंक्शन में, दूसरा कोण वैकल्पिक है। यदि प्रदान नहीं किया गया है, तो वाई-अक्ष में कोई (0) तिरछा नहीं होगा।
लंबाई या प्रतिशत	दूरी को एक लंबाई या प्रतिशत के रूप में व्यक्त किया जाता है जिसके द्वारा तत्व का अनुवाद किया जाना चाहिए। `translate()` फ़ंक्शन में, दूसरी लंबाई-या-प्रतिशत वैकल्पिक है। यदि प्रदान नहीं किया गया है, तो वाई-अक्ष में कोई (0) अनुवाद नहीं होगा।
पैमाने के कारक	एक संख्या जो यह बताती है कि तत्व को निर्दिष्ट अक्ष में कितनी बार स्केल किया जाना चाहिए। `scale()` फ़ंक्शन में, दूसरा स्केल-फैक्टर वैकल्पिक है। यदि प्रदान नहीं किया गया है, तो पहले पैमाने-कारक को वाई-अक्ष के लिए भी लागू किया जाएगा।

टिप्पणियों

2 डी कोऑर्डिनेट सिस्टम

2 डी एक्स / वाई समन्वय प्रणाली के अनुसार ट्रांसफ़ॉर्म किए जाते हैं। X अक्ष दाईं ओर से बाएँ और Y अक्ष नीचे की ओर जाता है जैसा कि निम्नलिखित चित्र में दिखाया गया है:

तो एक सकारात्मक translateY() नीचे की ओर जाता है और एक सकारात्मक translateX() सही होता है।

ब्राउज़र समर्थन और उपसर्ग

IE इस संपत्ति का समर्थन करता है क्योंकि IE9 -ms- उपसर्ग के साथ। पुराने संस्करणों और एज को उपसर्ग की आवश्यकता नहीं है
फ़ायरफ़ॉक्स संस्करण 3.5 से इसका समर्थन करता है और संस्करण 15 तक -moz- उपसर्ग की आवश्यकता है
संस्करण 4 से क्रोम और संस्करण 34 तक -webkit- उपसर्ग की आवश्यकता है
सफारी को संस्करण 8 तक -webkit- उपसर्ग की आवश्यकता है
ओपेरा को संस्करण -o- लिए -o- उपसर्ग की आवश्यकता है और संस्करण 15 से 22 तक -webkit- उपसर्ग
Android को संस्करण 2.1 से 4.4.4 तक -webkit- उपसर्ग की आवश्यकता है

उपसर्ग परिवर्तन का उदाहरण:

-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);

घुमाएँ

एचटीएमएल

<div class="rotate"></div>

सीएसएस

.rotate {
    width: 100px;
    height: 100px;
    background: teal;
    transform: rotate(45deg);
}

यह उदाहरण div को 45 डिग्री दक्षिणावर्त घुमाएगा। रोटेशन के केंद्र div, के केंद्र में है 50% बाएं से और 50% ऊपर से। आप transform-origin संपत्ति सेट करके रोटेशन के केंद्र को बदल सकते हैं।

transform-origin: 100% 50%;

ऊपर का उदाहरण रोटेशन के केंद्र को दाईं ओर अंत के मध्य में सेट करेगा।

स्केल

एचटीएमएल

<div class="scale"></div>

सीएसएस

.scale {
    width: 100px;
    height: 100px;
    background: teal;
    transform: scale(0.5, 1.3);
}

यह उदाहरण X अक्ष पर 100px * 0.5 = 50px पर और Y अक्ष पर 100px * 1.3 = 130px पर 100px * 1.3 = 130px करेगा।

बदलने के केंद्र div, के केंद्र में है 50% बाएं से और 50% ऊपर से।

अनुवाद करना

एचटीएमएल

<div class="translate"></div>

सीएसएस

.translate {
    width: 100px;
    height: 100px;
    background: teal;
    transform: translate(200px, 50%);
}

यह उदाहरण X अक्ष पर 200px से और Y अक्ष पर 100px * 50% = 50px से div ले जाएगा।

आप एकल अक्ष पर अनुवाद भी निर्दिष्ट कर सकते हैं।

एक्स अक्ष पर:

.translate {
    transform: translateX(200px);
}

Y अक्ष पर:

.translate {
    transform: translateY(50%);
}

तिरछा

एचटीएमएल

<div class="skew"></div>

सीएसएस

.skew {
    width: 100px;
    height: 100px;
    background: teal;
    transform: skew(20deg, -30deg);
}

यह उदाहरण X अक्ष पर 20 डिग्री और Y अक्ष पर 30 डिग्री से div तिरछा करेगा।
बदलने के केंद्र div, के केंद्र में है 50% बाएं से और 50% ऊपर से।

परिणाम देखें यहाँ ।

एकाधिक परिवर्तन

इस तरह एक संपत्ति में एक तत्व के लिए कई परिवर्तन लागू किए जा सकते हैं:

transform: rotate(15deg) translateX(200px);

यह तत्व को 15 डिग्री दक्षिणावर्त घुमाएगा और फिर दाईं ओर 200px अनुवाद करेगा।

जंजीर परिवर्तनों में, समन्वय प्रणाली तत्व के साथ चलती है । इसका मतलब यह है कि अनुवाद क्षैतिज नहीं होगा, लेकिन एक अक्ष पर, 15 डिग्री दक्षिणावर्त घुमाएँ जैसा कि निम्नलिखित छवि में दिखाया गया है:

परिवर्तनों के क्रम को बदलने से आउटपुट बदल जाएगा। पहला उदाहरण अलग होगा

transform: translateX(200px) rotate(15deg);

<div class="transform"></div>

.transform {
  transform: rotate(15deg) translateX(200px);
}

जैसा इस चित्र में दिखाया गया है:

ट्रांसफॉर्म उत्पत्ति

ट्रांसफ़ॉर्मेशन एक बिंदु के संबंध में किया जाता है जिसे transform-origin संपत्ति द्वारा परिभाषित किया गया है।

संपत्ति 2 मान लेती है: transform-origin: XY;

निम्नलिखित उदाहरण में पहला div ( .tl ) transform-origin: 0 0; साथ ऊपरी बाएँ कोने के चारों ओर घुमाया गया है transform-origin: 0 0; और दूसरा ( .tr ) transform-origin: 100% 0 साथ शीर्ष दाएं कोने के आसपास transform-origin: 100% 0 । रोटेशन को हॉवर पर लागू किया जाता है:

HTML:

<div class="transform originl"></div>
<div class="transform origin2"></div>

सीएसएस:

.transform {
    display: inline-block;
    width: 200px;
    height: 100px;
    background: teal;
    transition: transform 1s;
}

.origin1 {
    transform-origin: 0 0;
}

.origin2 {
    transform-origin: 100% 0;
}

.transform:hover {
    transform: rotate(30deg);
}

ट्रांसफॉर्म-मूल संपत्ति के लिए डिफ़ॉल्ट मान 50% 50% जो तत्व का केंद्र है।

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

CSS
2 डी रूपांतरण

खोज…

वाक्य - विन्यास

पैरामीटर

टिप्पणियों

2 डी कोऑर्डिनेट सिस्टम

ब्राउज़र समर्थन और उपसर्ग

उपसर्ग परिवर्तन का उदाहरण:

घुमाएँ

स्केल

अनुवाद करना

तिरछा

एकाधिक परिवर्तन

ट्रांसफॉर्म उत्पत्ति