CSS转换后无法单击按钮 [英] Can't click on buttons after CSS transform

问题描述

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

I'm trying to make a html page with a cube on it, each face of said cube would have buttons on it. On the default face all the buttons work fine, however, as soon as I rotate the cube the new face looses all interactivity.

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/

Here's a Fiddle link demonstrating my problem: http://jsfiddle.net/x66yn/

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

(Note that the demo will only work on webkit browsers.)

推荐答案

您需要为元素赋予非静态的位置。这是因为元素当前不在其父级中，父级向前移动时，它会覆盖子级

You need to give the elements a non-static position. This is because the elements are not currently positioned in their parent, with the parent being moved forward it covers the children

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

> 演示

注意：我添加了鼠标悬停时进行更改以显示其效果

Note: I added a cursor change on hover to show it works

另一种方法是，将按钮沿Z方向向前移动大于或等于其父Z轴移动，因为

The other option is to move the buttons forward in the Z direction greater than or equal to it's parent z-axis movement since you're doing so with the parent

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

演示

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

In your case specifically, the back panel will not work just using the above, the angle of the right button also cannot be 90 (some some reason which I don't know for sure). It has to do with how the browser is rendering it. As a result, just use 89.999 which is indistinguishable to us but works fine

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

这篇关于CSS转换后无法单击按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！