खोया हुआ दस्तावेज या परिवर्तन: मैट्रिक्स 3 डी

जब आप ट्रांसफ़ॉर्मिंग के लिए CSS3 के डॉक्यूमेंटेशन में उतरते हैं: मैट्रिक्स 3 डी, आपको एक छोटी परिभाषा मिलती है "एक 4x4 मैट्रिक्स के रूप में 3 डी ट्रांसफ़ॉर्म को परिभाषित करता है।"

matrix3d(m00, m01, m02, m03,
m10, m11, m12, m13,
m20, m21, m22, m23,
m30, m31, m31, m33)

और अगर आप गणित के भगवान नहीं हैं, तो सबसे अधिक संभावना है, अंदर प्रलेखन की कमी के बारे में चिंता है, इस सवाल के बाद कि वास्तव में शांत चीज कैसे बनाई जाए? वर्णित दृष्टिकोण गणितीय या पूर्ण कहे जाने का दिखावा नहीं करता है - मैं सिर्फ एक छोटे से प्रलेखन अंतराल को भरने की कोशिश कर रहा हूं।

डेमो | प्राथमिक स्रोत

थोड़ा रैखिक बीजगणित

किसी भी जटिल परिवर्तन को तीन बुनियादी लोगों द्वारा दर्शाया जा सकता है:

घुमाएँ (घुमाने)
स्केलिंग (पैमाने)
Move (का अनुवाद)

इन 3 बुनियादी परिवर्तनों को एक विशाल व्यापक परिवर्तन मैट्रिक्स में जोड़ा जा सकता है। अब तक, सब कुछ सरल है, लेकिन 3 बुनियादी चरणों से अपरिवर्तित सूची को कैसे स्थानांतरित करना है जो कि मैट्रिक्स 3 डी की आवश्यकता है? चलो गणित में सबसे सरल मैट्रिक्स से शुरू करते हैं (अपने जीवन को आसान बनाने के लिए, मैं मैट्रिस के साथ गणितीय कार्यों के लिए सिल्वेस्टर का उपयोग करता हूं)।

यूनिट मैट्रिक्स

यह मैट्रिक्स कुछ नहीं करता है! कोई नहीं! अशक्त! नाडा! एक भी पिक्सेल चोटिल नहीं हुआ था! मैंने इस मैट्रिक्स को 2 खंडों में विभाजित किया है। रेड सेक्शन वह क्षेत्र है जहाँ रोटेट और स्केल का वर्णन किया जाता है। पीला अनुभाग एक अनुवाद का वर्णन करता है। एलएसडी शैली में वास्तव में अजीब एफएक्स डेमो को छोड़कर शेष पैरामीटर बहुत कम उपयोग किए जाते हैं।

हम स्केलिंग फैक्टर द्वारा पहचान मैट्रिक्स को गुणा करके स्केलिंग मैट्रिक्स बनाकर शुरू करेंगे।
स्केलमैट्रीक्स = इंडेंटिटीमैट्रिक्स.multiply (s)

स्केलिंग मैट्रिक्स

स्केलमैट्रिक्स = $ M ([
[s, 0,0,0],
[0, एस, 0,0],
[0,0, s, 0],
[0,0,0, एस]
])

चूँकि हम अनुवाद निर्देशांक को बदलना नहीं चाहते हैं, इसलिए अंतिम स्केलिंग पैरामीटर को 1 से बदलें:

स्केलमैट्रिक्स = $ M ([
[s, 0,0,0],
[0, एस, 0,0],
[0,0, s, 0],
[0,0,0,1]
])

रोटेशन मैट्रिक्स (घुमाएँ)

रोटेशन को किसी दिए गए कोण पर अपने स्वयं के अक्ष X, Y, Z के चारों ओर ले जाया जा सकता है। आइए प्रत्येक अक्ष के ए, बी, सी के रूप में कोण मान लें। इस तरह के परिवर्तन का प्रतिनिधित्व करने वाले पत्राचार:

रोटेशनएक्समैट्रिक्स = $ एम ([
[1,0,0,0]
[०, मैथ.कोस (ए), मैथ.सिन (-ए), ०],
[0, मैथ.सिन (ए), मैथ.कोस (ए), 0],
[0,0,0,1]
])

रोटेशनYमेट्रिक्स = $ एम ([
[Math.cos (b), 0, Math.sin (b), 0],
[0,1,0,0]
[Math.sin (-b), 0, Math.cos (b), 0],
[0,0,0,1]
])

रोटेशनएममैट्रिक्स = $ M ([
[Math.cos (c), Math.sin (-c), 0, 0],
[Math.sin (c), Math.cos (c), 0, 0],
[0,0,1,0]
[0,0,0,1]
])

प्रत्येक मैट्रिक्स एक अक्ष के चारों ओर एक रोटेशन का वर्णन करता है।

विस्थापन मैट्रिक्स (अनुवाद)

अनुवादमैट्रिक्स = $ M ([
[1,0,0,0]
[0,1,0,0]
[0,0,1,0]
[tx, ty, tz, 1]
])

विस्थापन मैट्रिक्स अधिकांश पिक्सेल को प्रभावित नहीं करता है, लेकिन परिणामी दिशा वेक्टर में tx, ty, और tz मान जोड़ता है।

मज़ा

हां, गणित मजेदार हो सकता है, और इनमें से प्रत्येक मैट्रिक्स का उपयोग रचना में किया जा सकता है। इसलिए, यदि आपको प्रत्येक अक्ष के चारों ओर कुछ घुमाने की आवश्यकता है और फिर इसे कुछ पिक्सेल स्थानांतरित करें, बस इन मैट्रिसेस को गुणा करें। वह सब है:

tM = रोटेशनएक्समैट्रिक्स
.x (रोटाइमैट्रिक्स)
.x (रोटेशनजेटमैट्रिक्स)
.x (स्केलमैट्रिक्स)
.x (ट्रांसलेशनमैट्रिक्स)

और अंत में, छवि में परिवर्तन लागू करें:
s = "मैट्रिक्स 3 डी ("
s + = tM.e (1,1) .toFixed (10) + "," + tM.e (1,2) .toFixed (10) + "," + tM.e (1,3) .toFixed। 10) + "," + tM.e (1,4) .toFixed (10) + ","
s + = tM.e (2,1) .toFixed (10) + "," + tM.e (2,2) .toFixed (10) + "," + tM.e (2,3) .toFixed 10) + "," + tM.e (2,4) .toFixed (10) + ","
s + = tM.e (3,1) .toFixed (10) + "," + tM.e (3,2) .toFixed (10) + "," + tM.e (3,3) .toFixed (। 10) + "," + tM.e (3,4) .toFixed (10) + ","
s + = tM.e (4,1) .toFixed (10) + "," + tM.e (4,2) .toFixed (10) + "," + tM.e (4,3) .toFixed ( 10) + "," + tM.e (4,4) .toFixed (10)
s + = ")"

document.getElementById ('darth-vader')। शैली ['- वेबकिट-ट्रांसफ़ॉर्म]' s

चेतावनी

सबसे पहले, यदि आप एक रेखीय परिवर्तन को गूगल करते हैं और इस तरह के मैट्रिसेस के उदाहरण पाते हैं, तो आपको आश्चर्य हो सकता है कि मैट्रिसेस थोड़ा अलग हैं। तथ्य यह है कि सीएसएस मैट्रिक्स को ट्रांसपोज़ किया गया है - यह इतना सरल है, मैट्रिक्स को ट्रांसपोज़ करें और इसे काम करना चाहिए।

दूसरे, CSS मापदंडों के रूप में संख्याओं के वैज्ञानिक रूप (उदा। 123e-15) का समर्थन नहीं करता है - इसलिए आपको उन्हें सामान्य करने के लिए toFixed (नंबरऑफडिजीट्स) का उपयोग करने की आवश्यकता है।

विकास का वातावरण

दृष्टिकोण -webkit- क्रोम या सफारी, फ़ायरफ़ॉक्स 10 और IE 10. जैसे ब्राउज़र में काम करता है। आप यहां उपसर्ग देख सकते हैं caniuse.com/transforms3d । डेमो केवल -webkit- में काम करता है और कॉफ़ीस्क्रिप्ट में लिखा जाता है जो जावास्क्रिप्ट की तुलना में थोड़ा ठंडा है - लेकिन संकलित कोड को पठनीय होना चाहिए। आप पूरा पाठ और स्रोत जीथब पर उठा सकते हैं।

डेमो
मूल लेख
लेखक का फेसबुक
ट्विटर लेखक
तेजस्वी जावास्क्रिप्ट सिल्वेस्टर लाइब्रेरी
विकिपीडिया पर रैखिक परिवर्तन लेख