如何使用3d变换等距瓷砖对齐正确的透视数学

Question

我想使用透视和3D旋转来制作这样的等距瓷砖。

        _____
       /    /
      /    /
     /____/
    /    /
   /____/
  /____/

每个瓷砖都是div。我目前的工作是：

<section>
<div class="cg_board isometric">
  <div class="tile tileX one"></div>
  <div class="tile tileX two"></div>
</div>
</section>

section {
  background: #cccccc;
  height: 600px;
  width: 760px;
}

.cg_board {
  position: relative;
  background: #67433E;
  height: 600px;
  width: 600px;
}

.isometric {
  perspective: 2000px;
}

.tile {
  position: absolute; 
  border: 1px solid black;
  background: #FF2300;
}

.tileX {
  height: 100px;
  width: 200px;
  transform-style: preserve-3d;
  transform: translateY(10px) translateX(-100px) rotateX(40deg) rotateZ(40deg);
}

.one {
  left:50%;
  height: 200px;
  width: 200px;
}

.two {
  left: 34%;
  top: 22%;
}

css3d转换涉及的正确技术和数学是什么？

请参阅codepen：http://codepen.io/eguneys/pen/mOxJxN?editors=1100

完整转换版本：http://codepen.io/eguneys/pen/aBYNJq?editors=1100