CSS3 rotate3d bug

Question

我对rotate3d有点问题。看看这个小提琴： https://jsfiddle.net/c3snpkpr/

问题是，如果你将鼠标悬停在左边或右边的<div>上，有时它会正常工作，有时它会比给定的180度更多或更少地进行窃听和旋转。带角的<div>也是一样的。 我怎么能避免这个？

Answer 1

当你hover元素时，鼠标指针有时会在它动画时结束时（元素松散鼠标捕获），当它被移回时，就好像你已经采取了指针在你自己之外。

使用包装元素（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>