css 3d立方体 - 悬停和渲染错误

Question

我试图创建3个具有相同视角的3d立方体，它将在悬停时旋转90度。 它几乎适用于chrome，但是如果你仔细观察左边立方体的底部边框，你可以看到1条蓝色px线。 将鼠标悬停在右侧框上时，ff也会出错。 我该如何删除它？

我尝试添加backface-visibility: hidden，-webkit-backface-visibility: hidden

第二个问题是当你移动立方体时，它就像你要离开立方体区域一样。

这是我到目前为止所做的： http://codepen.io/pioncz/pen/jEVJWo

Answer 1

我认为这个渲染问题可能是由透视引起的。改变后它对我来说很好：