CSS3 transformierte Element nicht sichtbar in Firefox

Question

Ich möchte eine Perspektive Tennisplatz mit CSS3 erstellen. Es sieht gut aus in Webkit, aber in Firefox ist das Gericht selbst nicht sichtbar. Hier ist der relevante Code:

HTML:

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

CSS:

#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); 
} 

Ich denke, es hat etwas mit der CSS3-Transformation zu tun, aber ich sehe nicht das Problem .. .

So sollte es aussehen, aber das ganze Gericht (<div class="court">) ist im aktuellen Firefox nicht sichtbar.

Und schließlich ist hier die Demo: http://jsfiddle.net/Szgpy/

Answer 1

Das Problem ist in diesen Regeln für #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); 

Sie benötigen den dritten Parameter von scale3d zu ändern ("Die z-Komponente des Skalierungsvektors") von 0 bis 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

ich nehme an, dass, wenn Firefox die Z-Achse auf Null skaliert wird das Element so weit abgeflacht, daß es nicht mehr existiert, aber Chrom behandelt das Element als perfekt flach während es immer noch angezeigt wird.

Ihr Gericht wird immer noch gleich aussehen, auch wenn die Z-Skalierung 1 ist, weil die div Sie ein 2D-Objekt transformieren. Es ist schon flach; Sie müssen es nicht weiter abflachen.