CSS3转换后点击不会出现

我在Chrome/Safari浏览器下出现问题。应用CSS3转换后，我没有收到mouseup和点击事件（在IE9/10下工作得很好）。CSS3转换后点击不会出现

这是我不能正常工作的样品：

<script type="text/javascript"> 
    $(".box").mousedown(function (e) { 
     $(this).addClass('transform'); 
    }); 

    $(".box").mouseup(function (e) { 
     $(this).removeClass('transform'); 
    }); 

    $(".box").click(function (e) { 
     alert("Click"); // Not worked under Chrome/Safari ! 
    }); 
</script> 

<div class="box"></div>

和CSS3风格：

.box { 
    background-color:#f00; 
    width:200px; 
    height:200px; 
} 

.transform { 
    transform-origin: 0% 50%; 
    transform: rotateY(10deg); 
    -ms-transform-origin: 0% 50%; 
    -ms-transform: rotateY(10deg); 
    -webkit-transform-origin: 0% 50%; 
    -webkit-transform: rotateY(10deg); 
}

来源

2012-07-26 Victor

的问题是，你需要设置position:absolute：

.transform { 
    transform-origin: 0% 50%; 
    transform: rotateY(30deg); 
    -ms-transform-origin: 0% 50%; 
    -ms-transform: rotateY(30deg); 
    -webkit-transform-origin: 0% 50% 0px; 
    -webkit-transform: rotateY(-31deg); 
}

Check this Demo UPDATED 2

可以查看转化

来源

2012-07-26 18:45:32 Luis

谢谢，但我看到旋转（2D）和旋转X/Y（3D）的区别。我的想法是使用3D转换。 – Victor 2012-07-26 19:00:23

@Victor好的，请尝试检查我的更新！ – Luis 2012-07-26 19:04:44

好的，我删除了不必要的冒号，并得到了与我在我的问题中所述相同的结果。 – Victor 2012-07-26 19:10:11

这是一个浏览器错误与WebKit的这个链接。只要您非常小心地取消任何Z变换（正确 - 简单更好），点击就可以正常工作。

Firefox和IE都将处理点击，尽管他们的Z变换。

位置：绝对可能适用于某些人，但这对于浏览器故障是不适当的解决方案。

来源

2013-03-30 01:00:13 smaudet

有几个原因可能会发生。如上所述，其中之一是，绝对位置应该设置在父母的某处。

但是，webkit（以及其他浏览器）中也存在一个当前的bug，其中transformationZ值是随机计算变换面的。因此，该解决方案适用于：

-webkit-transform:translateZ(0px); 
-moz-transform:translateZ(0px); 
transform:translateZ(0px);

给元素，这是给你的互动问题。这对于一个div元素是有效的，这个元素被一堆嵌套的子元素转换，并且会间断地给我不同角度的点击反馈。我知道这是发生的事情，因为我能够通过将其中一个子元素移到父元素的边缘之外来“解决”该问题，这意味着父元素不可见地遮蔽了子元素。

但是应该指出，这个修补程序似乎也解决了后续子元素的Z深度问题，这些问题实际上不应该存在于第一个地方。这表明一个简单的循环呈现错误，这意味着这个'修复'可能会随着开发者调整渲染例程而在未来的浏览器更新中打破。

来源

2013-10-09 01:58:56 smaudet

CSS3转换后点击不会出现

回答

相关问题