问题
I'm using -webkit-transform: rotate(40 deg) and it seems that the rotated element is hiding parts of elements which are on top ( not children ) of the rotated one.
I created a jsFiddle here with the code, since it will be easier to demonstrate.
Probably this is because the rotated element hides parts of other elements, but I don't want this effect. How can I fix that?
I used z-index but it doesn't help!
回答1:
You're doing a 3D transform. You have 'rotateY' in the fiddle not 'rotate'. So you're moving part of the plane in front of the buttons. Check for yourself by changing code for the second button to
$("div.buttonB").click( function() {
$("div.background").css('-webkit-transform', 'rotateY(-190deg)')
});
This way after clicking buttonB, buttonB will be clickable but buttonA won't. Now change -190deg to 190deg and you'll see that it works other way around.
If you want to wrap your head around 3D transformations check out this site.
http://thewebrocks.com/demos/3D-css-tester/
Watch the video and play with the controls. Hope this helps.
来源：https://stackoverflow.com/questions/11169760/webkit-transform-rotate-hides-elements-on-top