Elemento trasformato CSS3 non visibile in firefox

Question

Voglio creare un campo da tennis in prospettiva utilizzando CSS3. Sembra fantastico in Webkit, ma in Firefox, la corte non è visibile. Ecco il codice rilevante:

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

Credo che abbia qualcosa a che fare con la trasformazione CSS3, ma non vedo il problema ..

Questo è come dovrebbe apparire, ma l'intero tribunale (<div class="court">) non è visibile nell'ultimo Firefox.

E, infine, ecco la demo: http://jsfiddle.net/Szgpy/

Answer 1

Il problema è in queste regole per #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); 

È necessario modificare il terzo parametro di scale3d ("la componente z del vettore di ridimensionamento") da 0 a 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

Sto indovinando che quando Firefox scale l'asse Z a zero, l'elemento è appiattito così tanto che non esiste più, ma Chrome considera l'elemento come perfettamente piatta pur continuando a visualizzarlo.

Il tuo tribunale sarà sempre lo stesso anche quando il ridimensionamento z è 1, perché lo div che stai trasformando è un oggetto 2D. È già piatto; non è necessario appiattirlo ulteriormente.