Question

我正在使用模板制作网站，模板是Canvas（https://themeforest.net/item/canvas-the-multipurpose-html5-template/9228123）

我正在尝试将翻页卡（http://themes.semicolonweb.com/html/canvas/flip-cards.html）中的元素与其他元素（特别是模态框和灯箱）组合在一起，但是翻页卡中的文字不断起作用，以下是一些屏幕截图：

modal bug

nav bar bug

如您所见，翻转卡文本不仅干扰模式框，而且也干扰导航栏。

我想我将其范围缩小到此类：

    .flip-card-inner {
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
    transform: translateY(-50%) translateZ(60px) scale(0.94);
    top: 50%;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 2rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
    perspective: inherit;
    z-index: 2;
}

当我移除-webkit-transform: translateY(-50%) translateZ(60px) scale(0.94); transform: translateY(-50%) translateZ(60px) scale(0.94);时，重叠部分消失了，但随后的可翻转卡坏了。

我该如何解决？

webkit转换导致重叠

0 个答案: