CSS转换后无法点击按钮答案

【问题标题】：Can't click on buttons after CSS transformCSS转换后无法点击按钮
【发布时间】：2014-06-26 05:58:49
【问题描述】：

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

这是一个展示我的问题的 Fiddle 链接：http://jsfiddle.net/x66yn/

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

【问题讨论】：

在这种情况下，您将按钮旋转 90 度，这就是按钮未点击的原因。
@Tukhsanov 实际上，要让按钮位于立方体后面，那么它必须在 Y 轴上应用 -90 旋转，也许在这个小提琴上更容易注意到：jsfiddle.net/x66yn/9

标签： html css transform

【解决方案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)");
});

【讨论】：

感谢您的回答，但在您的演示中，我仍然无法单击 Face Five 上的按钮（在 Toggle Right 之后）。
90deg 问题很奇怪。不知道为什么会这样。

【解决方案2】：

我遇到了类似的问题，但对我来说，请帮助从多维数据集（DIV）中删除此规则：backface-visibility : hidden; 并将多维数据集旋转 89.99（点后只有两个“9”）

在 Chrome、Firefox、Safari 和 IE11 中使用这个立方体

【讨论】：