透视属性 (css3) 在 Mozilla Firefox 浏览器上不起作用答案

【问题标题】：Perspective property (css3) not working on Mozilla Firefox browser透视属性 (css3) 在 Mozilla Firefox 浏览器上不起作用
【发布时间】：2014-05-08 12:46:21
【问题描述】：

我创建了一个 HTML 文件，我想用 CSS3 动画来打开/关闭门。使用 Perspective 属性来完成这项任务。

我的代码在 Google Chrome 中成功运行，但在 Mozilla Firefox 浏览器中无法运行。

我的代码是-

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>demo perspective</title>

<style>
#box{
    margin:100px;
    width:300px;
    height:400px;
    background:#343454;

    -webkit-transform: perspective(300) rotateY(20deg);
    -webkit-transform-origin:0% 0%;
    -webkit-animation: door 2s linear 0s infinite;

    -moz-transform: perspective(300) rotateY(20deg);
    -moz-transform-origin:0% 0%;
    -moz-animation: door 2s linear 0s infinite;

    transform: perspective(300) rotateY(20deg);
    transform-origin:0% 0%;
    animation: door 2s linear 0s infinite;
}

@-moz-keyframes door{
    0%{
        -moz-transform: perspective(300) rotateY(80deg);
        -moz-transform-origin:0% 0%;
        -moz-animation-timing-function:ease-in;
    }
    50%{
        -moz-transform: perspective(300) rotateY(0deg);
        -moz-transform-origin:0% 0%;
        -moz-animation-timing-function:ease-in;
    }
    100%{
        -moz-transform: perspective(300) rotateY(20deg);
        -moz-transform-origin:0% 0%;
        -moz-animation-timing-function:ease-in;
    }
}

@-webkit-keyframes door{
    0%{
        -webkit-transform: perspective(300) rotateY(80deg);
        -webkit-transform-origin:0% 0%;
        -webkit-animation-timing-function:ease-in;
    }
    50%{
        -webkit-transform: perspective(300) rotateY(0deg);
        -webkit-transform-origin:0% 0%;
        -webkit-animation-timing-function:ease-in;
    }
    100%{
        -webkit-transform: perspective(300) rotateY(20deg);
        -webkit-transform-origin:0% 0%;
        -webkit-animation-timing-function:ease-in;
    }
}

</style>

</head>
<body>

    <div id="box"></div>


</body>
</html>

【问题讨论】：

标签： html css browser mozilla

【解决方案1】：

您需要指定透视的单位 [px,em,pt,etc]。

在您的代码中，应该是：

transform: perspective(300px) rotateY(20deg);

代替：

transform: perspective(300) rotateY(20deg);

没有单位的数字是没有意义的invalid according to the w3 docs，除非值是0。（也可以参考this SO answer

另一方面，您还应该有一个不带前缀的@keyframes，就像大多数newer browsers support it一样。

【讨论】：