CSS3旋转过渡导致间歇性的鼠标点击检测

Question

这是一个与CSS3非常相似的问题，在动画元素上旋转导致点击事件不调用

虽然我的问题有点不同，但我不能评论它来添加支持信息。

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

在鼠标悬停时，我有一个围绕Y轴旋转的链接内的span。点击事件(对于jQuery或仅仅是链接导航)并不总是被检测到。尝试点击链接的填充区域(就在文本之外，但在链接上)。这几乎就像有一个命中检测问题，因为跨度是旋转的，因此在角度上，鼠标没有点击跨度。即使鼠标仍然点击填充区域的链接。70-110度的角度似乎是问题所在。

上述文章中提出的解决方案实际上并没有解决这个问题。另外，我的问题可能有点不同，因为我的旋转是作为CSS过渡而不是JS间隔触发器处理的。

任何想法吗?有人见过这个吗?我知道这是一种很俗气的链接方式，但对于目标网站来说，这是一个可以接受的奶酪量。

请随意简化jsfiddle，我从简单开始并添加了一些调试信息来帮助识别问题。

html:

<ul>
  <li><a href="" class="flip-link"><span>Click this link</span></a></li>
  <li id="LinkCounter">LinkClicked</li>
  <li>&nbsp</li>
  <li id="SpanCounter">SpanClicked</li>
<ul>

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解决方案会遇到问题。你还必须意识到，当div位于动画中间时，CSS实际上会使它们崩溃。我们的愿景实际上并不是发生了什么，它实际上是将div大小折叠为0，这意味着当你点击时，你不能"实际点击它"。下面的例子展示了你应该把一个绝对定位的div作为一个覆盖，并处理点击，即使是从一个清晰的，不可见的div，仍然会有你实际上点击了一个链接的错觉。

<a id="link"></a>
 $("#link").click(function(){
spanClickCount++;
$("#SpanCounter").text(spanClickCount);
}

Answer 2

如果元素被旋转以显示其背面，则不会在其背面接收点击，除非您特别强制其背面可见。

在你的span上使用:

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

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