Question

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

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

如果您点击＆＃34;翻转＆＃34; Chrome / Safari和Firefox中的按钮，您将看到它的工作方式不同。

我尝试了一些设置：

transform-style: flat

其他卡在卡片翻转时但似乎无法正常工作。

非常感谢任何帮助！

Answer 1

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

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

从所有元素中删除此类，并在将其翻转之前将其添加到当前卡片中。这适用于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中的其他元素

1 个答案: