0

我的屏幕上有两张卡片，当其中一张翻转时，背面会在 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>

这是一个在 Chrome 中工作的 CSS 和 JS 的小提琴，在 Firefox 中而不是在 Safari 中

4

1 回答 1

0

3D 空间中的 z 轴重叠

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

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

使较大的卡片在 3D 空间中实际上更靠近

我可以快速组合在一起的最简单的解决方案是在卡片很小的时候（当它们应该更远时）改变它们的 z 位置，以便在 3D 空间中它们实际上更远。

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

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

更新的演示

于 2013-03-28T20:53:41.117 回答