No se puede hacer clic en los botones después de la transformación CSS

Intento hacer una página html con un cubo, cada cara de dicho cubo tendría botones. En la cara predeterminada todos los botones funcionan bien, sin embargo, tan pronto como gire el cubo, la nueva cara pierde toda la interactividad.

HTML:

 

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); } 

Y JS:

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

Aquí hay un enlace de Fiddle que demuestra mi problema: http://jsfiddle.net/x66yn/

(Tenga en cuenta que la demostración solo funcionará en los navegadores webkit).

Necesita dar a los elementos una posición no estática. Esto se debe a que los elementos no están posicionados actualmente en su elemento primario, con el elemento principal que se mueve hacia adelante que cubre a los niños.

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

Manifestación

Nota: agregué un cambio de cursor en el control deslizante para mostrar que funciona

La otra opción es mover los botones hacia adelante en la dirección Z mayor o igual que su movimiento padre z-axis, ya que lo está haciendo con el padre

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

Manifestación

Específicamente en su caso, el panel posterior no funcionará solo con lo anterior, el ángulo del botón derecho tampoco puede ser 90 (alguna razón que no estoy seguro). Tiene que ver con la forma en que el navegador lo está renderizando. Como resultado, solo use 89.999, que es indistinguible para nosotros, pero funciona bien

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

Tuve un problema similar, pero para mí ayuda a eliminar del cubo (DIV) este ruls: backface-visibility : hidden; y gira el cubo por 89.99 (solo dos “9” después del punto)

Con este cubo funciona en Chrome, Firefox, Safari e IE11