我已经创建了一个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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句