我创建了一个 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>
最佳答案
您需要指定透视单位 [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 .
关于html - 透视属性 (css3) 不适用于 Mozilla Firefox 浏览器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23542172/