-webkit-transform：旋转-在顶部隐藏元素 [英] -webkit-transform: rotate - hides elements on top

问题描述

我正在使用 -webkit-transform：旋转（40度），似乎旋转后的元素隐藏了位于顶部的元素的一部分（

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.

我创建了一个jsFiddle

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?

我使用了 z-index ，但没有帮助！

I used z-index but it doesn't help!

推荐答案

您正在执行3D转换。您在提琴中有 rotateY而不是 rotate。
因此，您要在按钮前面移动飞机的一部分。
通过将第二个按钮的代码更改为

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)')
});

这样，在单击buttonB之后，buttonB将是可单击的，而buttonA将不会。
现在将-190deg更改为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.

如果您想将头包裹在3D变换上，请查看此内容现场。

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.

这篇关于-webkit-transform：旋转-在顶部隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！