CSS3 3D 转换发生水平溢出

Question

我在 http://mr.si/ 上遇到 CSS3 3D 转换问题。我这样做纯粹是为了好玩并探索新的 CSS 功能，但这让我感到不安。

当您将鼠标悬停在连续的最后两项上时，就会出现问题。除了想要的效果之外，还发生了一些不想要的事情 - 元素水平急剧溢出并且出现水平滚动条，这根本不令人愉快。

也许它是一个 WebKit bug，但它发生在最新的 Chrome Developer 版本和 Safari 5 中，所以可能不是。

知道我做错了什么吗？

编辑： 值得注意的是，我更改了网站，因此不再相关：P

Answer 1

说实话，你的问题让我大吃一惊，对我来说它看起来像是一个浏览器错误。

然而，我找到了一个简单的修复方法：

#main section {
overflow: hidden;
// the rest of your css declarations
}

它更像是一个补丁，而不是了解它为什么会做奇怪的事情，但我希望它有所帮助。

干杯!

编辑：用...解决了它

header[role="banner"], #main, #main + footer {
  overflow: hidden;
  padding: 0 20px;
  //yourcode
}