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

Question

这是一个与CSS3 Rotate on animated element causing click event not to invoke非常相似的问题

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

检查我的沙盒：http://jsfiddle.net/5bsG3/2/

在鼠标悬停时，我在围绕 Y 轴旋转的链接中有一个跨度。并不总是检测到单击事件（用于 jQuery 或仅用于链接导航）。尝试单击链接的填充区域（就在文本之外，但在链接上）。几乎就好像命中检测存在问题，因为跨度在旋转，因此在鼠标没有点击跨度的角度。即使鼠标仍然点击 LINK 的填充区域。 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 解决方案会有问题。您还必须意识到 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/