google-chrome - Chrome 24 css3 变换 3D 悬停时闪烁

Question

我在 chrome 24 上遇到了一个奇怪的错误。比冗长的描述更好，您可以在这里查看

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

working fiddle

此外，您不需要-ms-transform。 IE10 支持无前缀变换，IE9 不支持 3D 变换。

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

至于-moz-transform，目前只有Android版Firefox需要它。

参见caniuse.com