CSS 3d 变换仅在 webkit 中的其他元素下动画

Question

我有一个相当简单的 3d 变换，它本质上是一堆翻转卡片，可以前后翻转，反之亦然。当它们翻转时，我希望动画与其他卡片重叠。这在 Firefox 中完美运行，但动画出现在 Webkit 中其他卡片的下方。

Fiddle 在这里：https://jsfiddle.net/ojdavey/kwf8vLLx/1/

如果您在 Chrome/Safari 和 Firefox 中都单击 "Flip" 按钮，您将看到它的工作方式有何不同。

我尝试了一些设置，例如设置：

transform-style: flat

对于其他卡片，虽然卡片正在翻转，但似乎没有用。

如有任何帮助，我们将不胜感激！

Answer 1

一个可能的解决方案是在父容器上设置 z-index，当卡片被翻转时，例如：

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

从所有元素中删除此 class 并将其添加到当前卡片，然后再翻转它。这适用于 Safari 以及 Chrome.

演示

Try before buy

该演示也包括更新后的 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");
});

CSS 3d 变换仅在 webkit 中的其他元素下动画

CSS 3d transform animates under other elements in webkit only

html

css

webkit

transform