在Chrome中懸停狀態檢測CSS 3D元素

我有一個簡單的按鈕，它有懸停時的3d轉換。在Chrome中懸停狀態檢測CSS 3D元素

它在Firefox中很好地工作，但在Chrome中，「懸停區域」小於按鈕。如果按鈕不能即時播放動畫，則感覺不一致並且非常糟糕。

的HTML：

<div id="page-wrap"> 
    <div class="link1">CONTACT</div> 
</div>

的CSS也相當簡單，但前綴，包括一些解決方法已經：

.link1 { 
font-family: sans-serif; 
position: relative; 
font-size: 30px; 
color: #fff; 
cursor: pointer; 
width: 230px; 
height: 95px; 
line-height: 95px; 
background-color: rgba(20,20,20,0.9); 
display: inline-block; 
margin: 80px 90px; 
font-weight: 200; 
text-align: center; 

-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
-webkit-transition: all 0.5s ease; 
transition: all 0.5s ease; 

-moz-transform: perspective(1000px); 
-ms-transform: perspective(1000px); 
-o-transform: perspective(1000px); 
-webkit-transform: perspective(1000px); 
transform: perspective(1000px); 

transform-style: preserve-3d; 

outline: 1px solid transparent; /* Workaround Firefox Anti Aliasing */ 
} 

.link1:hover { 
-moz-transform: perspective(1000px) rotateY(30deg) translateX(25px); 
-ms-transform: perspective(1000px) rotateY(30deg) translateX(25px); 
-o-transform: perspective(1000px) rotateY(30deg) translateX(25px); 
-webkit-transform: perspective(1000px) rotateY(30deg) translateX(25px); 
transform: perspective(1000px) rotateY(30deg) translateX(25px); 
}

我會，如果很開心有人可以幫忙！

來源

2014-01-22 JKunstwald

一旦html元素旋轉，沒有transformZ，它的一部分與body相交，因爲它在z平面上與body平放。

就你而言，右側位於身體的後面，所以它不能響應鼠標事件。要解決此問題，請使用transform：translateZ將元素轉發。

例如：

transform: perspective(1000px) rotateY(30deg) translateX(25px) translateZ(200px);

可以使用變換：規模來對抗尺寸增加。試試這個小提琴WebKit中：
http://jsfiddle.net/ZsXkY/2/

，你將有微調它來得到你想要的精確定位。記住你可以設置transform-origin來控制轉換髮生的'axis'。

Firefox似乎處理與chrome不同的z平面問題。

來源

2014-01-22 21:02:38 CodeToad

謝謝！它現在肯定有效（當然，當按鈕跳進你的臉時），你能告訴我一個轉換起源的jfiddle嗎？（你發佈的鏈接沒有被編輯，它是原來的） – JKunstwald

這裏是更新的小提琴也使用變換比例來對付translateZ http://jsfiddle.net/ZsXkY/2/。在變換原點上工作... – CodeToad

這裏是變換原點的一個無關例子。它並不總是很容易看到在所有情況下的差異，os我在這裏使用了rotateZ：http://jsfiddle.net/q5G4c/2/ – CodeToad

對於一個簡單的解決方法，你可以添加

body { 
    -webkit-transform: translateZ(-5000px); 
    -moz-transform:translateZ(-5000px); 
    transform:translateZ(-5000px); 
}

解決懸停問題，我在Chrome瀏覽器。但我會認爲這是一個醜陋的黑客，不知道這可能有多少副作用。

btw。我也沒有問題在Firefox下

來源

2014-05-22 23:33:55 huehnerfaust

+1爲使主體返回到z平面的想法+1。如果這使視圖縮小，則可以使用變換比例來反轉該視圖。關於firefox，它比3d變換的鍍鉻效果更好。如果將大型元素上的3D旋轉與變換比例結合，則chrome無法呈現屏幕的某些部分。然而，firefox有z-index重疊3d元素的問題。 – CodeToad

在Chrome中懸停狀態檢測CSS 3D元素

回答

相關問題