css - -webkit-转换 : rotate - hides elements on top

Question

我正在使用 -webkit-transform: rotate(40 deg) 似乎旋转的元素隐藏了顶部元素的部分(不是 child ) 的旋转。

我创建了一个 jsFiddle here使用代码，因为它会更容易演示。

可能这是因为旋转的元素隐藏了其他元素的一部分，但我不想要这种效果。我该如何解决？

我使用了 z-index 但它没有帮助!

Answer 1

您正在进行 3D 变换。你在 fiddle 中有'rotateY'而不是'rotate'。 所以你在按钮前面移动了飞机的一部分。 通过将第二个按钮的代码更改为

$("div.buttonB").click( function() {
    $("div.background").css('-webkit-transform', 'rotateY(-190deg)')
});

这样点击buttonB后，buttonB可以点击buttonA不会。 现在将 -190deg 更改为 190deg，您会发现它以相反的方式工作。

如果您想全神贯注于 3D 转换，请查看此站点。

http://thewebrocks.com/demos/3D-css-tester/

观看视频并使用控件进行游戏。希望这会有所帮助。