Chrome 24 css3 transform 3D flickering on hover

Question

I'm having a weird bug on chrome 24. Better than a long description you can take a look here

.card {
  width:270px;
  height:180px;
  background:lightblue;
  border:1px solid black;
}

.card:hover {
  -webkit-transform:perspective(2000) rotate3d(0, 40, 0, 20deg);
  -moz-transform:perspective(2000) rotate3d(0, 40, 0, 20deg);
  -ms-transform:perspective(2000) rotate3d(0, 40, 0, 20deg);
  -o-transform:perspective(2000) rotate3d(0, 40, 0, 20deg);
  transform:perspective(2000) rotate3d(0, 40, 0, 20deg);
}

http://jsfiddle.net/xMfZw/3/

As you can see on the left side I can hover without problems but on the le right it's flickering as I'm not anymore hover the div.

Any advice?

It's working good on IE10, Firefox but not working on Opera.

Answer 1

What happens is that when you rotate it the right half goes behind the plane it was originally in so the hover doesn't work anymore. Translating the whole thing forward by half the width of the element (even less would work, half is for when you rotate it by 90 degrees around the vertical axis) would solve the problem.

-webkit-transform: translateZ(135px) perspective(2000) rotate3d(0, 40, 0, 20deg);

working fiddle

Also, you don't need -ms-transform. IE10 supports transforms unprefixed and IE9 does not support 3D transforms.

Opera does not support 3D transforms at all. So you don't need -o-transform either.

As for -moz-transform, it's only needed for Firefox for Android now.

See caniuse.com