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/

正如您在左侧看到的那样，我可以毫无问题地悬停，但在 le 右侧它闪烁，因为我不再悬停 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 才需要。

见caniuse.com