CSS3 rotate3D cross-browser issue

问题

So i have this fiddle: http://jsfiddle.net/aA9Rm/1/ . It works just fine in firefox, but i have some issues with it in chrome, and i can't understand why. In firefox if i move the mouse after the hover in the workhover container it works fine, doesn't do anything, but in chrome if i try to click or move an inch, it starts to move (shake) and I don't want that.

I use 3D rotations, from CSS3,

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

Solutions anyone?

回答1:

I think you encounter the same bug from this question : CSS Flip Transition Between Two <div>'s

It looks like a chrome bug where the div you're trying to rotate is rotating a bit too much. I can fix your jsfiddle on Chrome by changing this CSS (see the webkit degree) :

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

It's quite hacky but I never found any clean solution. You can also use pointer-events: none; property in some way to make it works.

来源：https://stackoverflow.com/questions/18484875/css3-rotate3d-cross-browser-issue