Question

屏幕上有两张卡片，当其中一张卡片翻转时，背面会在Safari的另一张卡片后面。 Chrome也是如此。在Firefox中，它暂时落后于另一张卡，但随后又弹出。任何帮助将不胜感激！

拖动卡片，然后单击黑色条将其翻转。

这是html ...

<div id="flipStage">
    <div class="card" id="bsg">
        <div class="front" id="bsgFront"></div>
        <div class="back" id="bsgBack" style="color: green;">f</div>
        <div class="flipButton"></div>
        <div class="handle"></div>
    </div>
    <div class="card" id="vger">
        <div class="front" id="vgerFront"></div>
        <div class="back" id="vgerBack" style="color: green;">f</div>
        <div class="flipButton"></div>
        <div class="handle"></div>
    </div>
</div>

Here's a fiddle with CSS and JS that works in Chrome, sorta in Firefox and not in Safari

Answer 1

三维空间中的z轴重叠

这是一种3D动画。活动卡看起来更大，就好像它在动画的3D空间中物理上更近一样。鉴于较大的卡片看起来更接近，你不会指望较小的卡片（看起来更远）与z轴上较大的卡片重叠。

但较大卡的z位置实际上并没有改变。它只是通过增加宽度和高度属性来缩放，以模拟在3D空间中在z轴上移动它。两张卡仍然占据z轴上的相同空间。这就是为什么较小的卡片在旋转期间有时出现在较大卡片的顶部;浏览器呈现两个占据相同空间的元素。

让更大的卡片在3D空间中更接近

我可以快速拼凑的最简单的解决方案是改变卡片的z位置，当它们很小时（当它们应该离得更远时），这样在3D空间中它们实际上距离更远。 / p>

.card.inactive {
    -webkit-transform: translate3d(0, 0, -100px);
       -moz-transform: translate3d(0, 0, -100px);
            transform: translate3d(0, 0, -100px);
}

在HTML中，所有卡片都以.inactive类开头，当卡片被放到前面时，卡片会被重置，以便除了前面的卡片之外的所有卡片都有此类。这是一种笨拙且有些倒退的方式，但它应该传达这个想法。

Updated demo

CSS卡翻转动画落后于Safari / Firefox中的另一张卡

1 个答案: