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轉換後點擊不會出現

回答

相關問題