Perspective property (css3) not working on Mozilla Firefox browser

StackOverflow https://stackoverflow.com/questions/23542172

  •  18-07-2023
  •  | 
  •  

Вопрос

I have created an HTML file in that I want to do animation with CSS3 animation to open/close door. Using Perspective property to do this task.

My code is successfully working in Google Chrome but not working in Mozilla Firefox browser.

My code is-

<!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>
Это было полезно?

Решение

You need to specify the unit of your perspective [px,em,pt,etc].

In your code, it should be:

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

Instead of:

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

The number without a unit is meaningless and invalid according to the w3 docs, unless the value is 0. (You can also refer to this SO answer

On another note, you should also have a non-prefixed @keyframes, as most newer browsers support it.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top