CSS3 Ruota sull’elemento animato causando l’evento click da non richiamare

Ok, questo mi sta causando molti problemi

Quando si utilizza lo stile css3 -webkit-transform con qualsiasi tipo di rotazione 3d (come ad esempio rotateY(30deg) ), è estremamente inaffidabile associare un evento click a questo object ruotato.

Vedere il codice di esempio qui sotto o guardare questo violino (per vedere l’inaffidabilità nel violino, fare clic sul lato destro dell’elemento). Questo esempio non ha animazione ma è comunque interessato.

html:

 
Click this box.

css:

 #box1{ -webkit-transform: rotateY(30deg); } 

jQuery:

 $('#box1').click(function(){ alert('clicked box 1'); }); 

Ciò che intendo per “inaffidabile” è che l’evento click non viene sempre generato (a seconda di dove lo si fa clic), ea volte l’evento non viene generato (indipendentemente da dove si fa clic).

C’è un modo per risolvere o evitare questo, quindi funziona con gli elementi CSS3 mentre viene ruotato e animato?

Aggiornare:

L’uso della proprietà CSS ‘float: left’ sull’elemento sembra consentirgli di rilevare correttamente gli eventi click * mentre non è in movimento . Qualcuno sa perché la proprietà float corregge questo?

Il mio objective finale è far sì che l’object riceva gli eventi click in movimento, tuttavia, quando applico una nuova proprietà di rot3d3 di CSS3 (live, su un altro evento jquery) per dare l’animazione dell’object, l’evento click ricomincia a fallire.

Non riesco a replicare il problema, sembra che funzioni correttamente dopo aver aggiunto un float:left; .

A volte i browser si comportano in modo divertente durante il rendering della larghezza effettiva di un elemento HTML. float:left sembra che i browser calcolino meglio.

Questo è il codice JavaScript:

 $(document).ready(function (){ $('#box1').bind({ 'click' : function () { alert('clicked box 1'); }, 'hover' : function () { console.log('Over Box 1'); } }); $('#box2').click(function(){ alert('clicked box 2'); }); window.angle = 0; setInterval(function () { if (window.angle >= 360) { window.angle = 0; } else { window.angle += 5; } $('#box1').css('-webkit-transform', 'rotateY(' + window.angle + 'deg)'); }, 100); }); 

Ecco un violino aggiornato con l’animazione, sembra funzionare bene: http://jsfiddle.net/RyvtZ/9/

(Ho aggiunto console.log al hover del hover per semplificare la vita;))