CSS3 rotate3d Fehler

Question

Ich habe ein kleines Problem mit rotate3d. Schauen Sie auf dieser Fiddle: https://jsfiddle.net/c3snpkpr/

Das Problem ist, wenn Sie über die <div> von links oder rechts bewegen, manchmal funktioniert es richtig und manchmal ist es nervt und Drehen mehr oder weniger als die angegebenen 180 Grad. Die <div> mit Ecken machen das gleiche. Wie kann ich das vermeiden?

Answer 1

Was passiert ist, wenn Sie das Element, der Mauszeiger manchmal Art von außerhalb, wenn es animiert (das Element verlieren die Maus erfassen), und wenn, es bewegt sich zurück, als ob Sie den Zeiger außerhalb selbst genommen haben .

Ein Hüllenelement verwenden (fiddle demo) oder eine Pseudo (unterhalb Probe)

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>