CSS3回転遷移は、断続的なマウスクリックの検出

Question

を引き起こしこれはCSS3 Rotate on animated element causing click event not to invoke

と非常に同様の問題です。

チェックアウト私のサンドボックス：http://jsfiddle.net/5bsG3/2/

私は、マウスのホバーに、Y軸を中心に回転し、リンク内のスパンを持っています。 clickイベント（jQueryまたは単にリンクのナビゲーション用）が常に検出されるわけではありません。リンクのパッドのある領域をクリックしてみてください（テキストのすぐ上にありますが、リンク上）。スパンが回転しているため、マウスがスパンをクリックしていない角度であるため、ヒット検出に問題があるようです。マウスがまだLINKのパッドが置かれた領域をクリックしても。 70〜110度付近の角度が問題と思われます。

上記の記事の提案された解決策は、この問題を実際に修正するものではありません。また、JSインターバルトリガーの代わりにCSSのトランジションとしてローテーションが処理されるため、私の問題は多少異なるかもしれません。

どのような考えですか？誰もこれを見たことがありますか？私はこれがリンクを行うのチーズな方法だが、目標のウェブサイトのために、それは許容量のチーズです。

jsfiddleを簡単に簡略化して簡単に始め、問題を特定するためのデバッグ情報を追加しました。

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

問題。 CSSを使用したブラウザの不一致やブラウザ間の不一致があるため、純粋なCSSソリューションを使用することで問題が発生します。また、アニメーションの途中でCSSが実際にdivを折りたたむことも理解しておく必要があります。私たちのビジョンは実際に何が起こっているのではなく、実際にdivサイズを0に崩壊させます。つまり、クリックすると「実際にクリックする」ことができなくなります。絶対配置されたdivをオーバーレイとして配置し、でも、まだ実際にリンクをクリックしますの錯覚を持つことになります明確な、非表示のdivから。

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

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

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

} 

Answer 2

それの裏側が示されているように回転させられる要素を使っていない限り、裏面にクリックを受信しません具体的に見えるように裏面を強制

はあなたのスパンでこれを使用します。

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

を

参照：http://jsfiddle.net/5bsG3/8/