CSS轉換是否破壞轉換屬性（懸停時）？

Question

我遇到以下問題。當我使用變換設置CSS轉換時（translateZ懸停）奇怪的事情開始發生。如果你只是將鼠標懸停在元素上，就像預期的那樣工作，但是當你快速開始快速懸停（快速連續）時，變換開始中斷並且效果倍增（在正變換Z的情況下，元素將移近更接近「你，即使它在幾分鐘後返回到指定位置）。

下面是代碼，HTML：

<div id="wrapper"> 
    <ul> 
     <li></li> 
    </ul> 
</div> 

和CSS：

#wrapper { 
    perspective: 2000px; 
} 

ul li { 
    width: 200px; 
    height: 40px; 
    background: #0160ad; 
    transition: all 0.3s linear; 
} 

ul li:hover { 
    -webkit-transform: perspective(2000) translateZ(300px); 
} 

所以我在這裏做得不對，或者僅僅是它和必須做一些其他的方式防止這種情況發生的方法。

fiddle

Answer 1

當你正在轉換的東西，它總是有物業在這兩個州設立一個好主意。並且，與posible類似（保留未使用的屬性相同）。

因此，設置

ul li { 
    width: 200px; 
    height: 40px; 
    background: #0160ad; 
    transition: all 0.3s linear; 
    -webkit-transform: perspective(2000) translateZ(0px); 
} 

ul li:hover { 
    -webkit-transform: perspective(2000) translateZ(300px); 
} 

和它的作品確定：fiddle