2011-02-27 11 views
5

मैं, सीएसएस में सममितीय 3 डी करने के लिए कोशिश कर रहा हूँ यहाँ में सममितीय 3 डी करने के लिए कैसे क्या मैं अभी है 3 डी प्रभाव बनाने के लिए 1 पीएक्स द्वारा 1 पीएक्स, यह मेरे लिए बहुत हैकी लगता है। एनिमेट करते समय, मैं 1px की नई परत जोड़ने की कोशिश कर रहा हूं, इसलिए एनीमेशन विफल रहता है (वास्तव में अच्छा नहीं)।सीएसएस

क्या इसे लागू करने का कोई बेहतर तरीका है? मैंने सीएसएस सामग्री के पहले और बाद में सीएसएस मैट्रिक्स के बारे में सोचा और divs जोड़ा।

यह मेरी परियोजना में एक अच्छा जोड़ा होना चाहिए, मूल कार्य नहीं, इसलिए मैं ठीक हूं, आईई 9 के नीचे काम नहीं कर रहा हूं।

आपकी मदद के लिए धन्यवाद।

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

उत्तर

2

ठीक है, डुओप्लिकेल के पहले और बाद में उपयोग के आधार पर मुझे यह मिला है, लेकिन सीमाओं के साथ वास्तव में पहले और बाद में ब्लॉक पर रहते हैं ताकि मुझे पारदर्शिता में कोई समस्या न हो।

: http://jsfiddle.net/BXUdP/65/

मैं इसे क्यों पसंद है: पारदर्शिता के साथ कोई समस्या नहीं है, IE8 में काम करता है। एनीमेशन केवल फ़ायरफ़ॉक्स 4 में काम करता है, हालांकि, एक बग है जिसमें क्रोम है जो फ़िल्टर से पहले और बाद में एनिमेट नहीं कर सकता है। लेकिन अगले मील का पत्थर के लिए एक फिक्स की योजना बनाई गई है, इसलिए यह अब के लिए काफी हद तक कम हो गया है।

5

मुझे यकीन नहीं है कि मेरा संस्करण आपके से कम हैकी है। फिर भी, यह एक दिलचस्प समस्या है और मैंने इसे आज़माया।

http://jsfiddle.net/duopixel/5fdcj/

मेरे संस्करण सरल सीमाओं कहते हैं और तिरछी कोनों मैं इस्तेमाल किया सीमा आकार http://www.howtocreate.co.uk/tutorials/css/slopes बनाने के लिए। यदि आपकी पृष्ठभूमि ठोस रंग नहीं है तो यह काम नहीं करेगा।

ऐसा लगता है कि मुझे सबसे साफ समाधान सीमा छवियों का उपयोग करना शामिल होगा: http://www.css3.info/preview/border-image/

+0

मुझे यकीन नहीं है कि अगर हम सीमा छवियों के साथ प्रयास करते हैं तो हम एनिमेट कर सकते हैं, लेकिन आपका समाधान पहले से ही कम है और एनीमेशन काम करता है, बहुत धन्यवाद! :) – rnaud