Transformations CSS3D: perte de l'interactivité des éléments

Question

Je crée un cube 3D pouvant être pivoté à l'aide des commandes du clavier. Mais après la rotation, les parties de chaque face perdent de l'interactivité (les événements de la souris ne sont pas enregistrés sur les éléments contenus). Quelqu'un sait ce qui pourrait causer ce problème?

Il est difficile d'expliquer, alors voici un lien vers un site de test:

http://joe-morgan.net/projects/matrix3d/

Il ne fonctionne que dans Safari et Chrome, bien sûr.

Joe Morgan

Answer 1

Joe, Ce qui se passe est, vous avez deux éléments sur exactement la même coordonnée z. À savoir, les <li class="cube active"> et les faces <section> en son sein.

Ici, nous ne parlons pas de l'index z de css, mais de la coordonnée z traduite par css3.

Lorsque le navigateur rencontre deux plans occupant littéralement exactement le même espace, les choses peuvent devenir salissantes.

Puisque vous ne voulez pas que l'élément li associe l'événement hover de votre face de cube, vous devez modifier vos classes CSS "actives". Sur la ligne 77 de main.js vous définissez avec le code:

vars.activeCube.css("-webkit-transform", action); 

Une solution rapide serait de créer une variable « action2 » qui stocke les mêmes matrix3d ​​que vous faites dans main.js, mais traduit -1px dans la coordonnée z. Réglez le CSS avec vars.activeCube.css("-webkit-transform", action2); et tout devrait fonctionner comme prévu. Faites-moi savoir si cela résout votre problème