CSS 转换后无法点击按钮

我正在尝试制作一个带有立方体的 html 页面，所述立方体的每个面都有按钮。在默认面上，所有按钮都可以正常工作，但是，一旦我旋转立方体，新面就会失去所有交互性。

HTML:

<button type="button" id="button">Toggle</button>
<hr>
<div id="cube">
    <div class="face one"></div>
    <div class="face two">
        <button type="button">All</button>
        <button type="button">News</button>
        <button type="button">Media</button>
        <button type="button">Events</button>
    </div>
    <div class="face three"></div>
    <div class="face four"></div>
    <div class="face five">
        <button type="button">All</button>
        <button type="button">News</button>
        <button type="button">Media</button>
        <button type="button">Events</button>
    </div>
    <div class="face six"></div>
</div>

CSS:

#cube {
    position: relative;
    height: 400px;
    -webkit-transition: -webkit-transform 2s linear;
    -webkit-transform-style: preserve-3d;
}
.face {
    position: absolute;
    height: 360px;
    background-color:#ffffff;
}
#cube .one {
    -webkit-transform: rotateX(90deg) translateZ(200px);
}
#cube .two {
    -webkit-transform: translateZ(200px);
}
#cube .three {
    -webkit-transform: rotateY(90deg) translateZ(200px);
}
#cube .four {
    -webkit-transform: rotateY(180deg) translateZ(200px);
}
#cube .five {
    -webkit-transform: rotateY(-90deg) translateZ(200px);
}
#cube .six {
    -webkit-transform: rotateX(-90deg) translateZ(200px) rotate(180deg);
}

And JS:

$("#button").click(function () {
    $('#cube').css("-webkit-transform", "rotateX(0deg) rotateY(90deg)");
});

这是一个演示我的问题的小提琴链接：http://jsfiddle.net/x66yn/ http://jsfiddle.net/x66yn/

（请注意，该演示仅适用于 webkit 浏览器。）

您需要给元素一个非静态的position。这是因为元素当前未定位在其父元素中，随着父元素向前移动，它覆盖了子元素

button {
    position: relative; /* Or absolute, fixed */
}

Demo http://jsfiddle.net/Zeaklous/x66yn/13/

注意：我在悬停时添加了光标更改以显示它的工作原理

另一个选项是在 Z 方向上向前移动按钮大于或等于其父级 z 轴移动，因为您是使用父级执行此操作

button {
    -webkit-transform: translateZ(200px); /* Equivalent or greater than parent's*/
    transform: translateZ(200px);
}

Demo http://jsfiddle.net/Zeaklous/x66yn/10/

具体来说，在您的情况下，后面板将无法仅使用上述内容，右侧按钮的角度也不能为 90 （某些我不确定的原因）。它与浏览器渲染它的方式有关。因此，只需使用 89.999，我们无法区分它，但工作正常

$("#buttonRight").click(function () {
    $('#cube').css("-webkit-transform", "rotateX(0deg) rotateY(89.999deg)");
});