2011-11-06 14 views
13

मेरे पास CSS3 पर निर्मित एक बहुत ही जटिल साइट है जिसमें एचटीएमएल तत्व 3 डी-ट्रांसफॉर्म, घुमाए गए, फ्लिप किए गए, फ्लॉप किए गए हैं और आमतौर पर विकृत हो जाते हैं।CSS3-3d रूपांतरित तत्वों की स्क्रीन स्थिति कैसे प्राप्त करें?

मैं इन तत्वों में से किसी एक के ऑन-स्क्रीन स्थान को जानने का प्रयास कर रहा हूं और ऐसा करने का कोई तरीका नहीं दिख रहा हूं। मैं सोच रहा था कि किसी के पास कोई सरल विचार है या नहीं।

वैकल्पिक रूप से, अगर कोई -webkit-perspective के पीछे गणित की व्याख्या कर सकता है, तो मैं स्थिति को समझ सकता हूं क्योंकि यह एकमात्र चीज है जिसे मैं मॉडल के मॉडल के बारे में सुनिश्चित नहीं कर रहा हूं।

उत्तर

13

क्या आपने getBoundingClientRect() का उपयोग करने का प्रयास किया है?

मैंने transform संपत्ति के साथ परिवर्तित किए गए तत्वों के आयामों की गणना करने के लिए इसे पहले से सफलतापूर्वक उपयोग किया है।

1

समस्या यह है कि CSS3 रूपांतरण वास्तव में तत्वों की स्थिति को वास्तव में परिवर्तित नहीं करता है। बेशक ब्राउज़र "जानते हैं" कि उन्हें दोबारा स्थानांतरित किया गया है, क्योंकि यह उन्हें प्रस्तुत करता है, लेकिन यह जानकारी वापस डोम/एपीआई को प्रदान नहीं की जाती है।

केवल एक चीज जिसे मैं सोच सकता हूं, परिवर्तनों के आधार पर स्थितियों की गणना करना है, क्योंकि ये "सरल" matrix transformations हैं।

दुर्भाग्य से बीजगणित कक्षा बहुत पहले हो चुकी है, कि मैं आपको यह नहीं बता सकता कि यह कैसे करना है - केवल यह संभव है।

+3

हाँ, मुझे पता है कि समस्या क्या है :) और मुझे खुद की गणना करने में खुशी होगी, लेकिन जैसा कि मैंने कहा था कि मुझे नहीं पता कि '-वेबिट-परिप्रेक्ष्य' के पीछे गणित वास्तव में क्या है। यह कुछ हद तक एक फोकल लम्बाई नियंत्रण की तरह कार्य करता है, लेकिन wtf '-webkit-perspective: 500' वास्तव में मतलब है?! –

+0

तीन.जेएस के CSS3DRenderer को देखो। मुझे जो याद है, वे कैमरे के क्षेत्र का दृश्य (एफओवी) लेते हैं, और परिप्रेक्ष्य प्राप्त करने के लिए चौड़ाई या ऊंचाई से इसे गुणा करते हैं। तो यह उन लोगों के संबंध में है। – Funkodebat

0

getBoundingClientRect का उपयोग करना एक अच्छा विचार है, लेकिन केवल आपको आयत के निर्देशांक प्रदान करेगा जिसमें आपका आकार होता है, न कि 4 टोपलेट, निचले दाएं, नीचे बाएं, शीर्ष दाएं कोने के सटीक निर्देशांक।

आप केवल उन गैर-परिवर्तनित निर्देशांकों को ले कर और जावास्क्रिप्ट के माध्यम से परिवर्तन को लागू करके ऐसा करने में सक्षम होंगे।

+2

कृपया इसे एक नया उत्तर जोड़ने के बजाय स्वीकृत उत्तर पर टिप्पणी के रूप में पोस्ट करें –

संबंधित मुद्दे