CSS3转换后的元素在firefox中不可见

Question

我想用CSS3创建一个透视网球场.它在Webkit中看起来很棒,但在Firefox中,法院本身并不可见.这是相关代码:

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

我想这与CSS3转换有关,但我没有看到问题......

它应该是这样的,但是<div class="court">在最新的Firefox中看不到整个球场().

最后,这是演示: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("缩放矢量的z分量")的第三个参数更改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);

固定jsFiddle演示

我猜测当Firefox将Z轴缩放到零时,元素会变得扁平,以至于它不再存在,但Chrome会将元素视为完全平坦,同时仍然显示它.

即使是z缩放1,你的宫廷看起来仍然会一样,因为div你正在变换是一个2D物体.它已经平坦了; 你不需要再进一步压扁它.