12Hannibal12 12Hannibal12 -5 years ago 225
CSS Question

CSS3 rotate3d bug

I've got a little problem with rotate3d. Look on this Fiddle:

The problem is, if you hover over the

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

Answer Source

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);

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download