Question

我试图制作一个带有立方体的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);
}

和JS：

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

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

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

Answer 1

您需要为元素提供非静态position。这是因为元素当前没有位于父元素中，父元素向前移动它覆盖了子元素

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

Demo

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

另一种选择是在Z方向上向前移动按钮大于或等于它的父z轴移动，因为你是在父母那样做了

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

Demo

在具体情况下，后面板不能正常工作，右键的角度也不能为90（某些原因我不确定）。它与浏览器如何呈现它有关。因此，只需使用89.999，这对我们来说难以区分，但工作正常

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

Answer 2

我有类似的问题，但对我来说帮助从立方体（DIV）移除这个ruls：if DTTJailbreakDetection.isJailbroken() { // your code }并旋转立方体89.99（只有两个＆＃34; 9＆＃34;点后）

此立方体适用于Chrome，Firefox，Safari和IE11

CSS转换后无法点击按钮

2 个答案: