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，现在只需要Firefox for Android。

请参阅caniuse.com

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

1 个答案: