CSS将溢出溢出到其他元素

Question

我有以下地图

我正在创建表来表示这些矩阵：

我使用以下旋转方法：

.rotate {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

不幸的是，当我旋转顶部矩阵时，我的顶部矩阵溢出到底部矩阵。您可以看到它们在H2S-M1和H2N-M1之间重叠

这里有没有人有关于如何使所有东西与所提供的地图非常相似的经验？

请看看我的JsFiddle：http://jsfiddle.net/27xyA/

请注意，我已尝试过此处描述的方法：http://kizu.ru/en/fun/rotated-text/但该解决方案不适用于非文本对象。