在微软边缘的CSS动画

Question

我得到了这段代码，但动画并没有在microsoft edge和firefox上运行。有人可以告诉我为什么吗？我试过一个autoprefixer，但它给了我相同的CSS。我也是网络开发的新手。

＆＃13;

＆＃13;

figure {
    float: left;
    height: 150px;
    margin: 24px;
    width: 300px;
    -webkit-transform: perspective(500);
    -webkit-transform-style: preserve-3d;
    -webkit-transition: .5s;
}
figure:hover {
    -webkit-transform: perspective(500) rotateX(90deg) translateY(-3em) 
     translateZ(3em);
}
img {
    background-color: #222;
    box-shadow: 0 20px 15px -10px hsla(0,0%,0%,.25);
    display: block;
    height: 100%;
    -webkit-transition: .5s;
}
figure:hover img {
    box-shadow: none;
}
figcaption {
    background-color: #222;
    color: #fff;
    padding: 1.5em;
    -webkit-transform: rotateX(-90deg);
    -webkit-transform-origin: 100% 0;
    -webkit-transition: .5s;
}
figure:hover figcaption {
    box-shadow: 0 20px 15px -10px hsla(0,0%,0%,.25);
}
h3 {
    font-weight: bold;
}​

＆＃13;

<figure>
   <img src="" alt="Portfolio Item">
   <figcaption>
      <a href="">
         <h3>Title</h3>
         <p>Description.</p>
      </a>
   </figcaption>
</figure>

＆＃13;

＆＃13;

＆＃13;