翻转动画在Firefox上不起作用 [英] Flip animation not working on Firefox

问题描述

我遵循了本教程，在我的网站上加入了卡片翻转功能.我学到了重要的一课，那就是不要让您的网站上线，而无需在所有主要浏览器上进行测试，因为该动画不会在Firefox上无法正常工作-它只能来回翻转.我知道我应该添加供应商前缀，并且我想我都知道了，但可能没有.

I followed this tutorial to incorporate a card flip on my website. I learned the important lesson of not letting your website go live without testing on all major browsers, because the animation doesn't work correctly on Firefox--it just flips back and forth. I know I'm supposed to add vendor prefixes, and I think I got them all but possibly not.

注释:也将非常感谢您提供一些有关如何在Firefox中进行调试的常规建议.我通常使用Chrome，但我对此并不满意.

note: Some general advice as to how to go about debugging this in Firefox would also be greatly appreciated. I usually use Chrome, and I'm not great with that.

css

/* entire container, keeps perspective */
.flip-container {
    -moz-perspective: 1000;
    perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
    margin: 10px 0 10px 0;

}

/* flip speed goes here */
.flipper {
    -moz-transition: 0.6s;
    transition: 0.6s;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
    -webkit-box-shadow:
    0px 0px 0px 2px rgba(0,0,0,0.6),
    0px 0px 0px 14px #fff,
    0px 0px 0px 18px rgba(0,0,0,0.2),
    6px 6px 8px 17px #555;

    -moz-box-shadow:
    0px 0px 0px 2px rgba(0,0,0,0.6),
    0px 0px 0px 14px #fff,
    0px 0px 0px 18px rgba(0,0,0,0.2),
    6px 6px 8px 17px #555;

    box-shadow:
    0px 0px 0px 2px rgba(0,0,0,0.6),
    0px 0px 0px 14px #fff,
    0px 0px 0px 18px rgba(0,0,0,0.2),
    6px 6px 8px 17px #555;
}

/* front pane, placed above back */
.front {
    z-index: 2;
}

/* back, initially hidden pane */
.back {
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    background-color: #99CCFF;
}

.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
    margin: 20px 26px 32px 26px;
}

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

.flipper {
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;

    position: relative;
}

.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;

    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;

    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;

    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;

    transition: 0.6s;
    transform-style: preserve-3d;


    position: absolute;
    top: 0;
    left: 0;
}

.back {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.flip-container:hover .back, .flip-container.hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.flip-container:hover .front, .flip-container.hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}


.front {
    z-index: 2;
}

html

    <div class='wedding_party_row'>
        <div class='wedding_party_row_contents'>
            <div class = 'wedding_party_header'>
                The Officiant
            </div>
            <div class='wedding_party_member'>
               <div class="flip-container" ontouchstart="this.classList.toggle('onmouseover');">
                <div class="flipper">
                    <div class="front">
                        <div class="party_image"><img /></div>
                    </div>
                    <div class="back">
                        <div class="party_text_container">

                            <div class="party_text">Blah blah</div>
                        </div>
                    </div>
                </div>
            </div>
         </div>
    </div>
</div>

推荐答案

假设您正试图将 just 翻转:
与David Walsh的示例相比，您尝试一次完成太多轮换.
我已经注释掉后面的transform: rotate规则，因此它在Firefox中有效.

Assuming that you're trying to make just a flip:
You tried to accomplish too many rotations at once compared to David Walsh's example.
I've commented out the latter transform: rotate rules and therefore it works in Firefox.

使用清理功能编辑更新的jsfiddle 参见我的jsfiddle: http://jsfiddle.net/Volker_E/n27qM/4/
我还在jsfiddle中添加了一些注释，以获得更好的代码，例如摆脱-moz-box-shadow (仅适用于Fx <4.0)或不包含值单位值为"0" ，依此类推.

Edit Updated jsfiddle with cleanup See my jsfiddle: http://jsfiddle.net/Volker_E/n27qM/4/
I've also added some comments for better code in my jsfiddle, like getting rid of -moz-box-shadow (just for Fx < 4.0) or don't include value units on values that are '0' and so on.

关于一般建议的问题:Firefox自己的开发人员工具是一个不错的开始，但是我认为最好的工具是Firebug.有关两者的比较，请参见>具有哪些独特功能Firebug是否具有Firefox内置的功能?
或者将您的代码不仅放入您的问题中，而且将其放在jsfiddle上，以便其他人可以立即摆弄！ ;)

Regarding your question on general advice: Firefox' own developer tools are a good start, but the best tool in my opinion is Firebug. For a comparison of the two see What unique features does Firebug have that are not built-in to Firefox?
Or put your code not only into your question, but also on jsfiddle, so others can start fiddling around immediately! ;)

这篇关于翻转动画在Firefox上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！