CSS3 转换元素在 Firefox 中不可见答案

【问题标题】：CSS3 transformed element not visible in firefoxCSS3 转换元素在 Firefox 中不可见
【发布时间】：2013-05-29 19:29:14
【问题描述】：

我想使用 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转换有关，但我没有看到问题......

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

最后，这里是演示：http://jsfiddle.net/Szgpy/

【问题讨论】：

+1 表示整洁。
另外，您是否考虑过为此使用 SVG？
我通过删除 -moz-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 0) translate(0px, -6em); 并保留该声明的无前缀版本：jsfiddle.net/Szgpy/3 - 虽然现在是个人，让法庭在 FF 15.01 出庭
@Adrift 我在你的小提琴中看不到它......我想知道这是不是因为 URL 是相对的，而不是绝对的。
@crush：现在检查一下 - 我一直在粘贴错误的小提琴，对不起它的早期：p

标签： css firefox transform perspective

【解决方案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);

fixed jsFiddle demo

我猜当 Firefox 将 Z 轴缩放为零时，该元素被扁平化到不再存在，但 Chrome 将元素视为完全扁平化，同时仍然显示它。

即使 z 缩放为 1，您的球场看起来仍然相同，因为您正在变换的 div 是一个 2D 对象。它已经平坦了；你不需要进一步压平它。

【讨论】：

@andyb 你说得对，scaleY() 会比scale3d() 更清晰。