logo标签列表

透视属性（CSS3）在Mozilla Firefox浏览器上无法正常工作

htmlcssbrowsermozilla
3

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

我的代码在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>
1个回答
2

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

在您的代码中，应该是：

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

改为:

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

没有单位的数字是毫无意义的，根据w3文档（链接），除非值为0。 (你也可以参考这个SO答案)

另外，你应该拥有非前缀的@keyframes，因为大多数新浏览器都支持它了。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接