Geek Answers Handbook

CSS3 rotate3D problem with multiple browsers

So, I have this script: http://jsfiddle.net/aA9Rm/1/ . It works fine in firefox, but I have some problems with it in chrome, and I can't figure out why. In firefox, if I move the mouse after hovering in the workhover container, it works fine, does nothing, 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 starting with CSS3,

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

Does anyone decide?

+1
css3
source share
1 answer

I think you came across the same error in this question: Transitioning with CSS translation between two <div>

It looks like a chrome error where the div you are trying to rotate rotates too much. I can fix your jsfiddle in Chrome by changing this CSS (see Webkit Degree):

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

These are pretty hacks, but I have not found any clean solution. You can also use the pointer-events: none; property pointer-events: none; to make it work.

+2
source share

More articles:


All Articles