Question

我尝试动画翻转div，以便正确调整大小以显示第二个div作为背面。一切都在Chrome上运行良好，而在Firefox和IE上，这种行为非常奇怪。

    <style>
.flip-container {
        -webkit-perspective: 1000px;
        -moz-perspective: 1000px;
        -ms-perspective: 1000px;
        -o-perspective: 1000px;
        perspective: 1000px;
        position: absolute;
        top: 0px;
        right: 0px;
    }

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

    #front.flip {
        -webkit-transform: rotateY(540deg) scale(2.5,2) translate(90px,62px);
        -moz-transform: rotateY(540deg) scale(2.5,2) translate(90px,62px);
        -o-transform: rotateY(540deg) scale(2.5,2) translate(90px,62px);
        transform: rotateY(540deg) scale(2.5,2) translate(90px,62px);
    }

    #front {
        width: 300px;
        height: 250px;
    }

    .flip-container, #back {
        width: 750px;
        height: 500px;
    }

    .flipper {
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        position: relative;
    }

    #front, #back {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: 0.6s;
        -moz-transition: 0.6s;
        -o-transition: 0.6s;
        -ms-transition: 0.6s;
        transition: 0.6s;
        position: absolute;
        top: 0;
        right: 0;
    }

    #front {
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
        background: lightgreen;
        z-index: 2;
    }

    #back {
        background: lightblue;
        -webkit-transform: rotateY(-540deg) translate(-225px,-125px) scale(0.4,0.5);
        -moz-transform: rotateY(-540deg) translate(-225px,-125px) scale(0.4,0.5);
        -o-transform: rotateY(-540deg) translate(-225px,-125px) scale(0.4,0.5);
        -ms-transform: rotateY(-540deg) translate(-225px,-125px) scale(0.4,0.5);
        transform: rotateY(-540deg) translate(-225px,-125px) scale(0.4,0.5);
    }
</style>

<div class="flip-container">
    <div class="flipper">
        <div id="front">
            Text1
        </div>

        <div id="back">
            Text2
        </div>
    </div>
</div>
<script>
var front = document.getElementById('front');
var back = document.getElementById('back');
front.onclick = function () {
front.className = 'flip';
back.className = 'flip';
}
</script>

这里有一个小提琴： https://jsfiddle.net/h6oa0st2/

正如你所看到的，它只在Firefox上翻转180度而不是预期的540度，而在IE上，动画是完全错误的。

我发现删除调整大小和翻译指令会导致正确的翻转，但效果当然与所需的不同。

有关如何解决此问题的任何提示？

提前致谢。

CSS3多个转换说明仅适用于Chrome

0 个答案: