Javascript -webkit转换（rotateX）会导致忽略z索引，从而影响单独div中的按钮

已解决： 在重新阅读w3转换规范之后，我意识到由于DOM结构，页脚被认为是3d上下文的一部分，并且受到旋转元素的影响。我只是简单地将.cardsContainer放在另一个元素中。cards3d container和页脚现在不被视为3d上下文的一部分。

-webkit透视图：1000px；似乎表明3d上下文从DOM中的该点开始。

---

使用css3转换旋转的容器存在重大问题，并且在另一个div中重写了按钮命中区域的一部分

变换在视觉上起作用，容器向后倾斜（使用rotateX）。但是，尽管页脚中的按钮具有更高的z索引，并且自然堆叠在容器上方，但是在旋转的容器和按钮视觉上重叠的地方，其命中区域被忽略。该按钮仍然“显示”在旋转容器的顶部，但其行为类似于在其下方

我应该提到我在css中使用更少的代码（而且所有更少的代码都有效）

我看过很多类似的问题，各种解决方案对我都不起作用。在那些不起作用的项目中（省略了供应商前缀）： 翻译3d（0px，0px，0px）； 变换风格：平直

以下是代码的简短版本：

html:
    <div class="screen snap" style="display: block;">
        <div class="container">**<!-- has perspective set to 1000 -->**
            <div class="cardsContainer"> **<!-- is rotated on x using transform -->**
                <div class="card" style="left: 130px; display: block;">
                    <div class="cardBack"></div>
                    <div class="cardFront" style="opacity: 0;">
                        <div class="cardContent">A piece of fruit.</div>
                    </div>
                </div>
            </div>
            <footer>
                        **<!-- at certain screen sizes, when the container and footer overlap, top half of this buttons hit area is inactive-->**
                <button class="checkButton">Start</button>
            </footer>
        </div>
    </div>

---

在重新阅读了w3转换规范之后，我意识到了问题所在

-webkit透视图：1000px；似乎表明3d上下文从DOM中的该点开始。我将透视样式应用于容器，其中页脚和cardsContainer都是容器的一部分。由于DOM结构，页脚被认为是3d上下文的一部分，并且受到旋转元素的影响

我只是简单地将.cardsContainer放在另一个元素的内部.cards3d container和页脚现在不被视为3d上下文的一部分，因为它现在不在具有透视样式集的dom结构中

现在的新结构是：

.screen.snap .container{
    .cards3dContainer{
        -webkit-perspective:1000px;

        .cardsContainer{
                }
     }

     .footer{
     }
}

• 向目前正在寻找答案的人道歉

---

如果您能将问题隔离到较小的代码块中，人们将更容易解决您的问题。谢谢，只需编辑它，以包含html的重点简短版本。我很高兴您找到了问题的解决方案。你可以把它作为一个答案发布并接受它；这样人们就会知道你的问题已经解决了。谢谢你，我会按照你的建议去做，但由于这是一个全新的帐户，而且我的声誉很低，我在网站上说的几个小时内无法回答我自己的问题。我已经加了答案，但是现在我不能再接受我的答案了。。。拥有一个全新帐户的喜悦和被迫的网站延迟；）该网站被迫推迟接受这个答案，因为它是一个全新的帐户。。。我至少要在24小时内整理好。

.screen.snap .container{
    padding: 0;
    margin: 0;
    border: 0;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    border-radius: 0;
    box-shadow: none;
    vertical-align: baseline;
    background-color: #efe8b6;
    -webkit-perspective:1000px;

    .cardsContainer{
        position:absolute;
        width:800px;
        height:350px;
        top:100px;
        text-align: center;
        background-color: lighten(#efe8b6, 10%);
        -webkit-transform: rotateX(20deg);

        .card {
            position: absolute;
            width:250px;
            height:350px;
            border-radius: 10px;

            .cardFront{
                background-image: url('images/snap_card_front.png');
                background-repeat: no-repeat;
                width:250px;
                height:350px;
                position: absolute;


                .cardContent{
                    width:200px;
                    height:300px;
                    font-size: 37px;
                }
            }

            .cardBack{
                background-image: url('images/snap_card_back.png');
                background-repeat: no-repeat;
                width:250px;
                height:350px;
                position: absolute;
            }
        }
    }
}

footer{
    z-index:999;
    background-color: #f00;
    position: relative;

    .button{
        position:absolute;
        width:50px;
        height:50px;
        background-color: #ccc;
        border-radius: 5px;
        font-size: 25px;
        cursor: pointer;
    }
}

.screen.snap .container{
    .cards3dContainer{
        -webkit-perspective:1000px;

        .cardsContainer{
                }
     }

     .footer{
     }
}