Невозможно нажимать кнопки после преобразования 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);
}

И JS:

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

Здесь ссылка Fiddle, демонстрирующая мою проблему: http://jsfiddle.net/x66yn/

(Обратите внимание, что демонстрация будет работать только в браузерах webkit.)

Ответ 1

Вам нужно указать элементы нестатические position. Это связано с тем, что элементы в настоящее время не расположены в родительском объекте, при этом родительский элемент перемещается вперед, он закрывает дочерние элементы

button {
    position:relative; /* Or absolute, inline-block, inline */
}

Демо

Примечание. Я добавил изменение курсора при наведении, чтобы показать, что он работает.

Другим вариантом является перемещение кнопок вперед в направлении Z больше или равно его родительскому перемещению оси z, так как вы делаете это с родительским

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

Демо

В вашем случае конкретно, задняя панель не будет работать только с использованием вышеизложенного, угол правой кнопки также не может быть 90 (по какой-то причине я не знаю точно). Это связано с тем, как браузер его выполняет. В результате просто используйте 89,999, который неотличим от нас, но отлично работает

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