CSS3 परिवर्तित तत्व फ़ायरफ़ॉक्स

Question

में दिखाई नहीं दे रहा है मैं CSS3 का उपयोग कर एक परिप्रेक्ष्य टेनिस कोर्ट बनाना चाहता हूं। यह वेबकिट में बहुत अच्छा लग रहा है, लेकिन फ़ायरफ़ॉक्स में, अदालत स्वयं दिखाई नहीं दे रही है। यहाँ प्रासंगिक कोड है:

HTML:

<div id="court-color"> 
    <div class="court_outer"> 
     <div class="court"></div> 
    </div>  
</div> 

सीएसएस:

#court-color .court_outer { 
    position: relative; 
    width: 514px; 
    height: 382px; 
    background-color: #82b192; 
    -webkit-perspective: 474px; 
    -moz-perspective: 474px; 
    -o-perspective: 474px; 
    -ms-perspective: 474px; 
    perspective: 474px; 
    -webkit-perspective-origin: 50%, 50%; 
    -moz-perspective-origin: 50%, 50%; 
    -o-perspective-origin: 50%, 50%; 
    -ms-perspective-origin: 50%, 50%; 
    overflow: hidden; 
} 

#court-color .court { 
    background-color: #4275b3; 
    width: 36em; 
    height: 78em; 
    font-size: 10px; 
    border: 0.5em solid #fff; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin: -39.5em -18.5em; 
    -webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 0) translate(0px, -6em); 
    -moz-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 0) translate(0px, -6em); 
    -o-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 0) translate(0px, -6em); 
    -ms-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 0) translate(0px, -6em); 
    transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 0) translate(0px, -6em); 
} 

मुझे लगता है कि यह CSS3 के परिवर्तन के साथ कुछ है, लेकिन मैं इस समस्या नहीं दिख रहा है ..

यह वही दिखता है, लेकिन पूरी अदालत (<div class="court">) नवीनतम फ़ायरफ़ॉक्स में दिखाई नहीं दे रही है। http://jsfiddle.net/Szgpy/

Answer 1

समस्या #court-color .court के लिए इन नियमों में है:

-webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 0) translate(0px, -6em); 
-moz-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 0) translate(0px, -6em); 
-o-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 0) translate(0px, -6em); 
-ms-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 0) translate(0px, -6em); 
transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 0) translate(0px, -6em); 

आप scale3d के तीसरे पैरामीटर (बदलने की जरूरत है

और अंत में, यहाँ डेमो है "स्केलिंग वेक्टर का जेड-घटक") 0 से 1:

-webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 1) translate(0px, -6em); 
-moz-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 1) translate(0px, -6em); 
-o-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 1) translate(0px, -6em); 
-ms-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 1) translate(0px, -6em); 
transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 1) translate(0px, -6em); 

fixed jsFiddle demo

मेरा अनुमान है कि यह है कि जब फ़ायरफ़ॉक्स मापता है शून्य करने के लिए Z- अक्ष, तत्व इतना चपटा है कि यह किसी भी अधिक मौजूद नहीं है, लेकिन क्रोम पूरी तरह से फ्लैट के रूप में व्यवहार करता है तत्व जबकि अभी भी इसे प्रदर्शित करते हैं।

आपकी अदालत अभी भी वही दिखाई देगी जब z-scaling 1 है, क्योंकि div आप बदल रहे हैं 2 डी ऑब्जेक्ट। यह पहले से ही फ्लैट है; आपको इसे आगे बढ़ाने की जरूरत नहीं है।