Question

我创建了一个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>

Answer 1

您需要指定观点的单位[px，em，pt等。

在您的代码中，它应该是：

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

而不是：

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

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

另外请注意，您应该还有一个不带前缀@keyframes的{{3}}。

Perspective属性（css3）无法在Mozilla Firefox浏览器上运行

1 个答案: