CSS3 Rotasyon geçiş aralıklı fare tıklaması algılama

Question

neden bu CSS3 Rotate on animated element causing click event not to invoke

çok benzer bir konudur.

Ödeme benim sandbox: http://jsfiddle.net/5bsG3/2/

Ben fareyi üzerinde, Y ekseni etrafında dönen bir bağlantı içinde bir süresi var. Tıklama olayı (jQuery için veya sadece bağlantı navigasyonu için) her zaman algılanmaz. Bağlantının dolgulu bölgesine tıklamayı deneyin (metnin hemen dışında ancak bağlantıda). Neredeyse, vurma tespiti ile ilgili bir sorun varmış gibi, çünkü açıklık dönüyor ve böylece farenin açıklığa tıklanmadığı açılarda. Fare yine de LINK'in doldurulmuş bölgesine tıklasa bile. 70-110 derece arasındaki açı problem gibi görünüyor.

Yukarıda belirtilen yayında önerilen çözüm bu sorunu düzeltmez. Ayrıca, rotasyonum bir JS aralığı tetikleyicisi yerine CSS geçişi olarak ele alındığından, sorunum biraz farklı olabilir.

Herhangi bir düşünce? Bunu daha önce gören oldu mu? Bunun bağlantı yapmanın sevecen bir yolu olduğunu biliyorum, ancak hedef web sitesi için kabul edilebilir miktarda peynir var.

Jsfiddle'ı basitleştirmek için çekinmeyin, basit bir şekilde başladım ve sorunu tanımlamak için biraz hata ayıklama bilgisi ekledim.

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

sorunu. CSS kullanan tarayıcı özellikleri ve tarayıcılar arasındaki ayrıcalıklar olduğu için, bir CSS çözümü kullanarak sorun yaşayacaksınız. Ayrıca, CSS'nin bir animasyonun ortasında olduklarında div'lerinizi gerçekten daralttığını fark etmeniz gerekir. vizyonumuz aslında ne olup bittiği değil, aslında div boyutunun 0'a çökmesidir, yani tıkladığınızda tıkladığınızda "gerçekten tıklarsınız." ifadesiyle, mutlak olarak konumlandırılmış bir div'i bindirme olarak kullanmanız ve tıklamanız gerektiğini gösterir. hatta hala aslında bir bağlantıyı tıklayarak yanılsaması olacak net olmayan görünür div dan. o arka arka tarafında tıklama almayacağını gösterilmektedir oluyor böylece sürece, döndürülür

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

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

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

} 

Answer 2

bir unsur özellikle görünür olmasını ters zorlamak için yayılma üzerinde

kullanın bu.

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

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