在 Mozilla 上制作 CSS 动画

Question

所以我有一组图像，这里是它们的 HTML：

<figure>
    <img src="">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="http://lorempixel.com/192/96/sports/2" alt="Portfolio Item">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="http://lorempixel.com/192/96/sports/7" alt="Portfolio Item">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

它们看起来像盒子，当您单击时，会触发 CSS 动画，它们翻转一侧有图像，另一侧有文本，这是 CSS 代码：

body {
    background-color: #f6f6f6;
    background-image: -webkit-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 50%,
                      hsla(0,0%,0%,.015) 50%, hsla(0,0%,0%,.015) 100%),
                      -webkit-radial-gradient(hsla(0,0%,0%,.05) 10%, transparent 15%);
    background-size: 1.5em 1.5em, .5em .5em;
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.5;
    margin: 0 auto;
    padding: 1.5em;
    width: 45em;
}
figure {
    float: left;
    height: 6em;
    margin: 1.5em;
    width: 12em;
    -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;
}​

一切都很好，但是当你通过 Mozilla 打开它时，动画不起作用，我不知道为什么我使用 webkit 前缀，但它仍然无法在 Mozilla 上工作我怎样才能让它在那里工作还有

Answer 1

perspective() CSS 函数的参数使用长度单位。 将 perspective(500) 更改为 perspective(500px) 以使其在 Firefox 和 Edge 上运行。

此外，前缀现在用于支持旧浏览器版本。 Firefox 使用 -moz- 前缀。较新版本的专业浏览器正在停止使用供应商前缀以实现兼容性。您应该使用带或不带前缀的动画属性来支持大多数浏览器。

body {
    background-color: #f6f6f6;
    background-image: -webkit-linear-gradient(left, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 50%, hsla(0, 0%, 0%, .015) 50%, hsla(0, 0%, 0%, .015) 100%),
                        linear-gradient(left, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 50%, hsla(0, 0%, 0%, .015) 50%, hsla(0, 0%, 0%, .015) 100%),
                        -webkit-radial-gradient(hsla(0, 0%, 0%, .05) 10%, transparent 15%), 
                        radial-gradient(hsla(0, 0%, 0%, .05) 10%, transparent 15%);
    background-size: 1.5em 1.5em, .5em .5em;
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.5;
    margin: 0 auto;
    padding: 1.5em;
    width: 45em;
}
figure {
    float: left;
    height: 6em;
    margin: 1.5em;
    width: 12em;
    -webkit-transform: perspective(500px);
    -moz-transform: perspective(500px);
    transform: perspective(500px);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;
}
figure:hover {
    -webkit-transform: rotateX(90deg) translateY(-3em) translateZ(3em);
    -moz-transform: rotateX(90deg) translateY(-3em) translateZ(3em);
    transform: 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;
    -moz-transition: .5s;
    transition: .5s;
}
figure:hover img {
    box-shadow: none;
}
figcaption {
    background-color: #222;
    color: #fff;
    padding: 1.5em;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;
}
figure:hover figcaption {
    box-shadow: 0 20px 15px -10px hsla(0, 0%, 0%, .25);
}
h3 {
    font-weight: bold;
}
​

Mozilla 开发者网络有更多关于 perspective 和 vendor prefixes 的信息。

希望这会有所帮助。