Chrome 24css3转换3D闪烁在悬停

Question

chrome 24出现了一个奇怪的bug。比起冗长的描述，你可以在这里看看

.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/

你可以看到，在左边我可以毫无问题地悬停但是在右下角，它在闪烁因为我不再悬停div

任何建议吗?

在IE10和Firefox上运行良好，但在Opera上不能运行

Answer 1

结果是，当你旋转它时，右半部分在它原来所在的平面后面，所以悬停不再起作用。将整个内容向前平移元素宽度的一半(更少也可以，一半是在绕垂直轴旋转90度时)可以解决这个问题。

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

工作小提琴

同样，你不需要-ms-transform。IE10支持无前缀转换，IE9不支持3D转换。

Opera根本不支持3D转换。所以你也不需要-o-transform。

至于-moz-transform，现在只需要Firefox for Android。

<<p>看到strong> caniuse.com