css - -webkit-transform: rotate - 在顶部隐藏元素

Question

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

我在这里用代码创建了一个 jsFiddle ，因为它更容易演示。

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

我用过z-index但是没用！

Answer 1

你正在做一个 3D 变换。你在小提琴中有'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/

观看视频并使用控件进行游戏。希望这可以帮助。