CSS 3D仅在WebKit中的其他元素下转换动画

Question

我有一个相当简单的3D变换，本质上是一堆翻转卡，可以从前到后面翻转，反之亦然。当它们被翻转时，我希望动画将其他卡重叠。这在Firefox中非常有效，但是动画发生在Webkit的其他卡下。

小提琴在这里：https：//jsfiddle.net/ojdavey/kwf8vllx/1/

如果单击Chrome/Safari和Firefox中的"翻转"按钮，您将看到其工作方式不同。

我尝试了几个设置之类的事情：

transform-style: flat

对于其他卡时，其他卡片正在翻转，但这似乎不起作用。

任何帮助将不胜感激！

Answer 1

一个可能的解决方案是将卡片拨动时，在父容器上设置z-index，例如：

.box.flip.active {
    z-index: 1;
}

从所有元素中删除此类，然后将其添加到当前卡中，然后再对其进行翻转。这在Safari和Chrome中起作用。

演示

购买前尝试

演示也包含更新的JavaScript代码。这不是优化的。只是证明行为：

$(".flip .flip-button").on("click", function() {
    $('.col4').removeClass('active');
    $(this).closest(".col4").addClass('active');
    $(this).closest(".card").addClass("flipped");
});
$(".flip .close").on("click", function() {
    $('.col4').removeClass('active');
    $(this).closest(".col4").addClass('active');
    $(this).closest(".card").removeClass("flipped");
});