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上提供了更多信息。

希望这有帮助。

使CSS动画在Mozilla上运行

1 个答案: