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

【问题标题】：Chrome 24 css3 transform 3D flickering on hoverChrome 24 css3 转换 3D 在悬停时闪烁
【发布时间】：2013-01-01 15:55:59
【问题描述】：

我在 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 上不运行。

【问题讨论】：

问题：为什么你使用rotate3d 而rotateY 在这种情况下会做同样的事情？
我首先使用了rotateY，这导致了同样的闪烁，所以我只是测试了其他方式考虑错误并发送了我拥有的最后一个代码。 :)

标签： google-chrome css hover transform translate3d

【解决方案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，现在只有Firefox for Android才需要。

见caniuse.com

【讨论】：

你，女士，真是个天才！非常感谢。 :)