CSS3 rotate3d bug

Question

我有一個rotate3d的小問題。看看這個小提琴： https://jsfiddle.net/c3snpkpr/

的問題是，如果你將鼠標懸停在<div>從左側或右側，有時它工作正常，有時被竊聽和旋轉然後給出180deg更多或更少。帶角落的<div>也一樣。 我該如何避免這種情況？

Answer 1

發生什麼事是當你的元素，鼠標指針有時會在它動畫時結束它的外部（元素鬆開鼠標捕捉），以及什麼時候，它回退，就好像你已經把指針指向了你自己。

使用的包裝元件（fiddle demo）或僞（下面樣品）

div { 
 
    width: 150px; 
 
    height: 150px; 
 
    margin-right: 20px; 
 
} 
 
div:after { 
 
    content: ''; 
 
    display: block; 
 
    background: green; 
 
    width: 150px; 
 
    height: 150px; 
 
    transition: 1s; 
 
    transform: rotate3d(0, 1, 0, 0deg); 
 
    border-radius: 50%; 
 
    border: 5px solid red; 
 
} 
 
div:hover:after { 
 
    background: red; 
 
    transition: 1s; 
 
    border: 5px solid green; 
 
    transform: rotate3d(0, 1, 0, 180deg); 
 
}

<div></div>