铬24 CSS3变换悬停

我有在Chrome 24比长描述更好了bug 3D闪烁，你可以到这里看看铬24 CSS3变换悬停

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

来源

2013-01-18 Arnaud Janssens

问：你为什么要使用'rotate3d'时'rotateY'会做在这种情况下，同样的事情？ – Ana

我首先使用了rotateY，这引起了相同的闪烁，所以我只是测试了其他方式思考一个错误，并发送了最后一个代码。 :) –

发生什么事是，当你旋转它的右半部分落后于它原来的飞机，所以悬停不再起作用。将整个事物向前移动半个元素的宽度（甚至更少可以工作，其中一半用于当您绕垂直轴旋转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

来源

2013-01-18 00:23:56 Ana

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

铬24 CSS3变换悬停

回答

相关问题