2013-03-09 11 views
7

मेरे पास एक पहेली here है जिसके साथ आप खेल सकते हैं। RotateX के चारों ओर ले जाएं और देखने के लिए स्लाइड स्लाइडर घुमाएं। आपके निकटतम तत्व का हिस्सा छोटा है जबकि भाग दूर दूर है। यदि आपबदले गए तत्वों पर परिप्रेक्ष्य पीछे क्यों दिखाई देता है?

transform:rotateZ(180deg); 

पर यह चारों ओर फ़्लिप करते हैं तो यह सही दिखता है लेकिन मुझे समझ में नहीं आता कि यह केवल पहली जगह क्यों सही नहीं दिखता है।

enter image description here

अद्यतन

यह समझ में आता है अगर तुम this 3d cube को देखो। क्यूब की ट्रांसफॉर्म उत्पत्ति घन के बीच है।

+0

यह विषय कैसे या क्यों है? नीचे सूचीबद्ध प्रत्येक उपयोगकर्ता जो इसे बंद विषय के रूप में बंद करता है वह कमजोर सॉस है। प्रश्न की वैधता के लिए चिपकने के लिए प्रजनन – albert

+0

thx की तुलना में अपने पवित्र के पीछे एक उत्तर या तर्क प्रदान करें। – user1873073

+0

@ थिंकिंगस्टिफ़ "उस के शीर्ष पर उस बकवास को डालने से रोकें" क्या गहराई से और सहज ज्ञान युक्त उत्तर है। हम सब उस से सीख सकते हैं! – albert

उत्तर

3

सममितीय

जहाँ तक मुझे बता सकते हैं के रूप में तरीके काम के रूप में वे करने के लिए लगता है कि कर रहे हैं, यह सिर्फ है कि वे सममितीय 3 डी में घुमाया जाता है, उस परिप्रेक्ष्य के बिना है। यह आपके निकटतम और आगे के किनारों का एक ही आकार होगा, वास्तविक 3 डी के विपरीत जहां आगे का किनारा छोटा दिखाई देगा और करीब बड़ा दिखाई देगा।

आइसोमेट्रिक प्रक्षेपण पर गहराई से देखने के लिए wikipedia article एक पठन दें।

परिप्रेक्ष्य

आप रोटेशन आप युक्त तत्व के लिए अपने सीएसएस करने के लिए perspective संपत्ति जोड़ने के लिए पर परिप्रेक्ष्य प्राप्त करना चाहते हैं। यदि आप अपने पहले फीडल में -webkit-perspective: 1000px;<body> जोड़ते हैं और परिणामस्वरूप क्रोम में आपको परिप्रेक्ष्य 3 डी मिलेगा जैसा संभवतः आप चाहते थे।

उस संपत्ति पर अधिक जानकारी CSS3 transform spec में मिल सकती है।

+0

को उभारा शुरू किया, अंत में यह काम करता है। अजीब बात यह है कि यह केवल एक बार कंटेनर के माता-पिता को लागू करने के लिए काम करता था। – user1873073

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