Question

所以我有这个小提琴：http://jsfiddle.net/aA9Rm/1/。它在firefox中运行得很好，但我在chrome中有一些问题，我无法理解为什么。在firefox中，如果我在悬停在workhover容器后移动鼠标它工作正常，没有做任何事情，但在chrome中，如果我尝试点击或移动一英寸，它开始移动（摇动），我不想要那。

我使用CSS3中的3D旋转

-moz-transform: rotateY(-90deg);;
-webkit-transform:rotateY(-90deg);
transform:rotateY(-90deg);

任何解决方案？

Answer 1

我认为你在这个问题上遇到了同样的错误： CSS Flip Transition Between Two <div>'s

它看起来像一个铬小虫，你试图旋转的div旋转有点太多了。我可以通过更改此CSS来修复您的jsfiddle（请参阅webkit学位）：

.cube:hover{
    -moz-transform: rotateY(-90deg);
    -webkit-transform:rotateY(-89.9deg);
    transform:rotateY(-90deg);
}

非常 hacky 但我从来没有找到任何干净的解决方案。您也可以通过某种方式使用pointer-events: none;属性来使其正常工作。

CSS3 rotate3D跨浏览器问题

1 个答案: