CSS3 3D转换发生水平溢出

Question

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

将鼠标悬停在一行中的最后两个项目上时会出现此问题。除了想要的效果之外，还会发生不必要的事情 - 元素水平溢出，水平滚动条出现，这根本不令人愉快。

也许它是一个WebKit错误，但它发生在最新的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
}