title: Perspective property (css3) not working on Mozilla Firefox browser
body: <p>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.</p>
  
  <p>My code is successfully working in Google Chrome but not working in Mozilla Firefox browser.</p>
  
  <p>My code is-</p>
  
  <pre><code>&lt;!doctype html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;demo perspective&lt;/title&gt;
  
  &lt;style&gt;
  #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;
      }
  }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="box"&gt;&lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>