CSS3在动画元素上旋转，导致不调用click事件
好吧，这个问题给我带来了很多问题。
当使用css3 -webkit-transform样式和任何类型的3d旋转（例如rotateY(30deg) ）时，将click事件绑定到此旋转对象是极不可靠的。
请参阅下面的示例代码或查看此小提琴 （要查看小提琴中的不可靠性，请单击元素的右侧）。 此示例没有动画但仍受影响。
HTML：
Click this box.
CSS：
#box1{ -webkit-transform: rotateY(30deg); }
jQuery的：
$('#box1').click(function(){ alert('clicked box 1'); });
我的意思是’不可靠’是不会总是抛出click事件（取决于你点击它的位置），有时事件根本不会抛出（无论你在哪里点击它）。
有没有办法来修复或避免这种情况，以便在旋转和动画时使用CSS3元素？
更新：
在元素上使用CSS属性“float：left”似乎允许它在不运动时正确检测点击事件。 有谁知道为什么浮动属性修复了这个？
我的最终目标是让对象在运动中接收点击事件，但是，当我应用新的CSS3 rotate3d属性（实时，在另一个jquery事件上）来给对象动画时，click事件再次开始失败。
我似乎无法复制问题，它似乎在添加float:left;后正常工作float:left; 。
有时浏览器在渲染HTML元素的实际宽度时表现得很有趣。 float:left似乎让浏览器计算得更好。
这是JavaScript：
$(document).ready(function (){ $('#box1').bind({ 'click' : function () { alert('clicked box 1'); }, 'hover' : function () { console.log('Over Box 1'); } }); $('#box2').click(function(){ alert('clicked box 2'); }); window.angle = 0; setInterval(function () { if (window.angle >= 360) { window.angle = 0; } else { window.angle += 5; } $('#box1').css('-webkit-transform', 'rotateY(' + window.angle + 'deg)'); }, 100); });
这是一个动画的更新小提琴，似乎工作正常： http ： //jsfiddle.net/RyvtZ/9/
（我在hover添加了console.log以简化生活;））