12Hannibal12 12Hannibal12 - 4 months ago 17
CSS Question

CSS3 rotate3d bug

I've got a little problem with rotate3d. Look on this Fiddle:
https://jsfiddle.net/c3snpkpr/

The problem is, if you hover over the

<div>
from the left or right, sometimes it works properly and sometimes it is bugging and rotating more or less then the given 180deg. The
<div>
with corners do the same.
How can I avoid this?

Answer

What happens is when you hover the element, the mouse pointer sometimes kind of end up outside it when it animates (the element loose the mouse capture), and when, it moves back as if you have taken the pointer outside yourself.

Use a wrapper element (fiddle demo) or a pseudo (below sample)

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>