transizione CSS3 rotazione provocando il mouse intermittente click rilevamento

Question

Questo è un problema molto simile a CSS3 Rotate on animated element causing click event not to invoke

Anche se il mio problema è un po 'diverso, più non posso commentare su di esso per aggiungere informazioni di supporto.

Checkout mia sandbox: http://jsfiddle.net/5bsG3/2/

Ho un arco all'interno di un link che ruota attorno all'asse Y, al passaggio del mouse. L'evento click (per jQuery o semplicemente per la navigazione con link) non viene sempre rilevato. Prova a fare clic sulla regione imbottita del link (appena fuori dal testo ma sul link). È quasi come se ci fosse un problema con il rilevamento dei colpi perché lo span sta girando e quindi in angoli in cui il mouse non sta facendo clic sullo span. Anche se il mouse continua a fare clic sulla regione imbottita del LINK. Angoli intorno 70-110 gradi sembrano essere il problema.

La soluzione proposta nel post di cui sopra non risolve effettivamente questo problema. Inoltre, il mio problema potrebbe essere un po 'diverso dal momento che la mia rotazione è gestita come una transizione CSS invece di un trigger di intervallo JS.

Qualche idea? Qualcuno ha visto questo prima? So che questo è un modo scadente di fare collegamenti, ma per il sito web di destinazione, è un formaggio di quantità accettabile.

Sentiti libero di semplificare il jsfiddle, ho iniziato in modo semplice e ho aggiunto un po 'di informazioni di debug per aiutare a identificare il problema.

html:

css:

ul li 
{ 
    display: inline; 
    float: left ; 
} 

.flip-link 
{ 
    float:left ; 
} 

span 
{ 
    float:left ; 
} 


.flip-link { 
    display: block; 
    overflow: hidden; 

    height: 20px; 
    padding: 5px 50px 7px 50px ; 
    margin-right: 10px ; 

    background: #AAA; 

    -webkit-perspective: 50px; 
     -moz-perspective: 50px; 
     -ms-perspective: 50px; 
      perspective: 50px; 

    -webkit-perspective-origin: 50% 50%; 
     -moz-perspective-origin: 50% 50%; 
     -ms-perspective-origin: 50% 50%; 
      perspective-origin: 50% 50%; 
} 

.flip-link span { 
    display: block; 
    position: relative; 

    background: #EEE; 

    padding: 0px 10px ; 

    -webkit-transition: all 1000ms ease; 
     -moz-transition: all 1000ms ease; 
     -ms-transition: all 1000ms ease; 
      transition: all 1000ms ease; 

    -webkit-transform-origin: 50% 0%; 
     -moz-transform-origin: 50% 0%; 
     -ms-transform-origin: 50% 0%; 
      transform-origin: 50% 0%; 

    -webkit-transform-style: preserve-3d; 
     -moz-transform-style: preserve-3d; 
     -ms-transform-style: preserve-3d; 
      transform-style: preserve-3d; 

} 
    .flip-link:hover span 
    { 
     -webkit-transform: translate3d(0px, 0px, 0px) rotateY(360deg); 
      -moz-transform: translate3d(0px, 0px, 0px) rotateY(360deg); 
      -ms-transform: translate3d(0px, 0px, 0px) rotateY(360deg); 
       transform: translate3d(0px, 0px, 0px) rotateY(360deg); 

     color: #55FF55 ; 
    } 

JS:

var linkClickCount = 0 ; 
var spanClickCount = 0 ; 

$(document).ready(function() { 
    $('.flip-link').click(function() { 
      linkClickCount++ ;    
      $("#LinkCounter").text(linkClickCount); 

      return (false); 
    }); 

    $('.flip-link span').click(function() { 
      spanClickCount++ ;    
      $("#SpanCounter").text(spanClickCount); 
    }); 
}); 

Answer 1

il problema. Dal momento che ci sono le disavventure del browser che usano i CSS, e persino le differenze tra i browser, avrai problemi usando una soluzione CSS pura. Devi anche rendersi conto che i CSS in realtà collassano i tuoi div quando sono nel mezzo di un'animazione. la nostra visione non è in realtà ciò che sta accadendo, in realtà sta collassando la dimensione div a 0, il che significa che quando clicchi non sarai in grado di "cliccarci sopra", mostra che dovresti mettere un div posizionato in modo assoluto come overlay e gestire il click anche da una chiara div visibile, non che avrà ancora l'illusione di effettivamente clic su un collegamento.

<a id="link"></a> 

$("#link").click(function(){ 

spanClickCount++; 
$("#SpanCounter").text(spanClickCount); 

} 

Answer 2

un elemento che è ruotato in modo che sia posteriore è mostrato non riceveranno clic sul retro, a meno che non specificamente forzare la parte posteriore per essere visibile

Utilizzare questo sul vostro arco:.

-webkit-backface-visibility: visible; 
    -moz-backface-visibility: visible; 
    -ms-backface-visibility: visible; 
    -o-backface-visibility: visible; 

Vedere: http://jsfiddle.net/5bsG3/8/