सीएसएस परिप्रेक्ष्य इंटरनेट एक्सप्लोरर 10 या फ़ायरफ़ॉक्स

Question

में काम नहीं कर रहा है मेरे पास एक jQuery छवि स्क्रॉलर है जो perpective और transform: translateZ सीएसएस गुणों का उपयोग करके गहराई को अनुकरण करता है। यह क्रोम में सही ढंग से प्रस्तुत करता है, लेकिन IE10 या फ़ायरफ़ॉक्स में नहीं। , http://jsfiddle.net/moosefetcher/rxCMr/28/ (मुझे यकीन है कि क्यों नहीं कर रहा हूँ: प्रासंगिक कोड का http://www.girlguiding.org.uk/test/biggig/index.html और यहाँ है एक jsFiddle:

यहाँ पूर्ण परियोजना ("कौन आ रहा है" मेनू लिंक पर क्लिक करें छवि स्क्रोलर देखने के लिए) है लेकिन stackoverflow कह रहा है कि मैं jsFiddle से जोड़ने के लिए कोड शामिल करने की जरूरत है, तो यहां सीएसएस है) ...

.scroller { 
    position: relative; 
    perspective: 150; 
    -webkit-perspective: 150; 
    -ms-perspective: 150; 
    -moz-perspective: 150; 
} 
.artistBox { 
    width: 228px; 
    height: 268px; 
    background-color: #000000; 
    border-radius: 16px; 
    position: absolute; 
    overflow: hidden; 
    z-index: 4; 
} 
.artistBox p { 
    position: absolute; 
    font-family:"Arial", sans-serif; 
    color: white; 
    font-size: 22px; 
} 
.artistBoxFront { 
    z-index: 5; 
} 
.artistBoxNew { 
    z-index: 3; 
    opacity: 0; 
} 
.scrollerButton { 
    position: absolute; 
    top: 128px; 
    width: 32px; 
    height: 32px; 
    border: 2px solid white; 
    border-radius: 32px; 
    background-color: #F49D19; 
    box-shadow: 1px 1px 3px #555588; 
    z-index: 6; 
} 
.scrollerButtonOver { 
    background-color: #ffaa26; 
    box-shadow: 2px 2px 3px #555588; 
} 

ध्यान दें कि मैं इस की कोशिश की है दोनों सहित और गुणों पर -ms- उपसर्ग को छोड़कर। (वर्तमान jsFiddle दोनों के साथ-साथ -webkit- और -moz-) शामिल हैं। कोई भी जानता है कि यह IE10 में क्यों काम नहीं कर रहा है? चीयर्स।

Answer 1

लंबाई की इकाई

IE और Firefox perspective मूल्यों (px, em) पर लंबाई की एक इकाई की आवश्यकता है।

-moz-perspective: 800px; 
     perspective: 800px; 

क्रोम और सफारी के लिए, लंबाई की इकाई वैकल्पिक जब -webkit उपसर्ग का उपयोग करके है।

-webkit-perspective: 800; /* This works with or without the px unit */ 

W3C मानकों

यह सब perspective मूल्यों के लिए लंबाई की एक इकाई को जोड़ने के लिए सुरक्षित है। यह W3C standard के साथ अधिक संगत है। यह एक ऐसा दृष्टिकोण है जो सभी ब्राउज़रों का समर्थन करता है। और एक बार क्रोम और सफारी बिना किसी उपसर्ग के perspective का समर्थन करना शुरू कर देते हैं, तो यह संभव है कि उन्हें लंबाई की एक इकाई (W3C मानकों के साथ स्थिरता और अन्य ब्राउज़रों के साथ) की आवश्यकता होगी।

-webkit-perspective: 800px; 
    -moz-perspective: 800px; 
     perspective: 800px; 

नोट:w3schools.com पर वर्तमान जानकारी पुरानी हो चुकी है। आईई 10 या फ़ायरफ़ॉक्स के लिए समर्थन का कोई उल्लेख नहीं है, और उनके उदाहरणों में लंबाई की इकाई नहीं है। developer.mozilla.org पर हाल के उदाहरणों में W3C मानकों के अनुरूप, लंबाई की एक इकाई शामिल है।

Answer 2

यह काम नहीं कर रहा है क्योंकि कोई वेबकिट ब्राउज़र परिप्रेक्ष्य संपत्ति को छोड़ देता है। वह संपत्ति या तो none या लंबाई मान स्वीकार करती है। लंबाई को एक इकाई की आवश्यकता होती है, जब तक कि मान 0 न हो। यदि आप एक इकाई जोड़ते हैं, जैसे कि पीएक्स, यह आईई और फ़ायरफ़ॉक्स में काम करता है।

http://jsfiddle.net/rxCMr/31/

मैं -ms- संपत्ति हटाया देखें के रूप में परिप्रेक्ष्य अंतिम संस्करण में एक उपसर्ग के बिना IE10 में जोड़ा गया था। मैंने भी अपरिक्स्ड संस्करण को अंतिम रूप में स्थानांतरित कर दिया, ताकि यह उपसर्ग संस्करणों पर जीत सके।

मुझे यकीन नहीं है कि यह वेबकिट में क्यों काम कर रहा है। इसे फ़ायरफ़ॉक्स और आईई जैसी संपत्ति छोड़नी चाहिए, लेकिन मुझे लगता है कि यह त्रुटि वसूली कर रहा है।

Answer 3

मै मैथ्यू वेगरफील्ड के ParallaxJS और perspective: 4000px का उपयोग कर रहा था लेकिन यह अभी भी आईई 10/11 में काम नहीं कर रहा था, जबकि क्रोम और फ़ायरफ़ॉक्स में बिल्कुल ठीक है।

मार्कअप

<ul class="container"> 
    <li class="layer">...</li> 
    <li class="layer">...</li> 
    <li class="layer">...</li> 
</ul> 

.container पर perspective: 4000px परिभाषित एफएफ और क्रोम के लिए ठीक था, लेकिन यह केवल IE के लिए काम जब .layer पर परिभाषित किया जा रहा शुरू कर दिया। तो शायद इसके लिए जाँच करें। मेरे पास सेट किए गए transform-style: preserve-3d || flat के असंख्य से कुछ और करने के लिए कुछ और हो सकता है, लेकिन यह है कि: चेक करें जिस पर चयनकर्ता आपका परिप्रेक्ष्य सेट है।