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

【问题标题】：-webkit-transform: rotate - hides elements on top-webkit-transform: rotate - 在顶部隐藏元素
【发布时间】：2012-06-24 04:23:03
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

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

来检查自己

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

这样点击buttonB后，buttonB可以点击，但是buttonA不能点击。现在将 -190deg 更改为 190deg ，您会发现它以其他方式工作。

如果您想深入了解 3D 转换，请查看此网站。

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

【讨论】：

好的，但是为什么当我将一个元素旋转 90 度时（如果元素是平的，这意味着显示它是回来的）然后我有这个框 - 从旋转元素的中心开始直到结束它，在所有其他标签之上？
我不明白你的意思。如果将平面旋转 90 度，您应该得到一个“矩形”，在这种情况下宽度等于 0。在这种情况下，两个按钮都是可点击的。
我有一个更新。我认为这是 Mac OS X 的 Chrome 中的一个错误......我已经更新了 fiddle 。我要写一个问题