CSS Firefox 中的翻转动画问题

Question

我尝试在我的网站上使用 David Walsh 的 CSS 翻转动画示例。我的代码片段中的代码不适用于 Firefox。

如何在不使用 javascript 魔法的情况下修复此代码？为什么最新版本的 Firefox 会出现这种情况？

#flip_blocks_main {
 position:relative;
 width: 100%;
 text-align: center;
}

.flip-container {
 margin-left:15px;
 margin-right:20px;
 margin-bottom:30px;
 display: inline-block;   
 
 -webkit-perspective: 1000;
 -moz-perspective: 1000;
 -o-perspective: 1000;
 -ms-perspective: 1000;
 perspective: 1000;
 
 -ms-transform: perspective(1000px);
 -moz-transform: perspective(1000px);
 -o-transform: perspective(1000px);
 -webkit-transform: perspective(1000px);
 transform: perspective(1000px);
 
 -moz-transform-style: preserve-3d; 
 -webkit-transform-style: preserve-3d; 
 -ms-transform-style: preserve-3d; 
 transform-style: preserve-3d; 
}

/* START: Accommodating for IE */
.flip-container:hover .back, .flip-container.hover .back {
 -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

.flip-container:hover .front, .flip-container.hover .front {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}
/* END: Accommodating for IE */

.flip-container, .front, .back {
 width: 300px;
 height: 230px;
}


.flipper {
 -webkit-transition: 0.6s;
 -webkit-transform-style: preserve-3d;
 -ms-transition: 0.6s;
 -moz-transition: 0.6s;
 -moz-transform: perspective(1000px);
 -moz-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transition: 1s;
 transform-style: preserve-3d;
 position: relative;
}

.front, .back {
 border: 4px solid black;
 border-radius: 10px;
 padding: 10px;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 backface-visibility: hidden;
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(180deg);
    -moz-transition: 1s;
    -moz-transform-style: preserve-3d;
    -moz-transform: rotateX(180deg);
    -o-transition: 1s;
    -o-transform-style: preserve-3d;
    -o-transform: rotateX(180deg);
    -ms-transition: 1s;
    -ms-transform-style: preserve-3d;
    -ms-transform: rotateX(180deg);
    transition: 1s;
    transform-style: preserve-3d;
    transform: rotateX(180deg);
 position: absolute;
 top: 0;
 left: 0;
}

.front {
 -webkit-transform: rotateX(0deg);
 -ms-transform: rotateX(0deg);
 background-color: #00E743;
 z-index: 2;
}

.back {
 background: #00e743;
 -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}

.back > a {
 color:#ffffff;
 text-decoration:underline !important;
    font-size: 14px;
    padding: 5px;
    display: block;
    width: auto;
    height: auto;
    margin-top: 160px;
    text-decoration: none;
}

.back > a:hover {
 color:#000000;
 background-color:#00e743;
 text-decoration:none;
}

<div id="flip_blocks_main">
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" id="front_optic_front"><h1>First: Optic front</h1></div>
<div class="back" id="front_optic_back"><a href="#">First: Optic back</a></div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" id="sticker_front"><h1>Second: Stickers front</h1></div>
<div class="back" id="sticker_back"><a href="#">Second: Stickers back</a></div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" id="audio_front"><h1>Third: Audio front</h1></div>
<div class="back" id="audio_back"><a href="#">Third: Audio back</a></div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" id="alcantara_front"><h1>4th: Alcantara front</h1></div>
<div class="back" id="alcantara_back"><a href="#">4th: Alcantara back</a></div>
</div>
</div>
</div>

Answer 1

在 .front 的样式中，您缺少无前缀转换属性:

.front {
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    background-color: #00E743;
    z-index: 2;
}

如果你添加它，它似乎有效：

.front {
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
    background-color: #00E743;
    z-index: 2;
}

CSS Firefox 中的翻转动画问题

Problems with CSS Flip animation in Firefox

css

firefox

animation

flip