非常奇怪的css3 spec 3d for 3d object manipulation perspective z index

Question

我想用css和3d变换创建一个等距游戏板。请参阅我的codepen了解我当前的工作：https://codepen.io/eguneys/pen/NbYZgj。

这里我粘贴了我的css代码：

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

.cg_board {
  position: relative;
  background: #24201F;
  height: 600px;
  width: 600px;
  transform-style: preserve-3d;
  transform: translateX(100px) rotateX(60deg) rotateZ(45deg);
}

.isometric {
  perspective: 5000px;
}

.house {
  position: absolute;
  z-index: 1000;
}

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

.tileX {
  background: #FF2300;
  height: 10%;
  width: 20%;
}
.tileY {
  background: #FFFF00;
  height: 20%;
  width: 10%;
}
.tileZ {
  background: #2A7E43;
  height: 20%;
  width: 10%;
  top: 70%;
}
.tileW {
  background: #582A72;
  height: 10%;
  width: 20%;
  left: 70%;
}

.hTileX {
  height: 8%;
  width: 10%;
  margin-top: 1%;
  margin-left: -3%;
  -webkit-transform: rotateX(-90deg) rotateY(45deg);
}

.hTileY {
  height: 8%;
  width: 10%;
  margin-top: -2%;
  -webkit-transform: rotateX(-90deg) rotateY(45deg);
}

.hTileZ {  
  height: 8%;
  width: 10%;
  margin-top: -2%;
  margin-left: -0.01%;
  top: 70%;
  -webkit-transform: rotateX(-90deg) rotateY(45deg);
}

.hTileW {
  height: 8%;
  width: 10%;
  left: 70%;
  margin-left: -3%;
  margin-top: 1%;
  -webkit-transform: rotateX(-90deg) rotateY(45deg);
}

.tileX:after,
.tileX:before,
.tileY:after,
.tileY:before,
.tileZ:after,
.tileZ:before,
.tileW:after,
.tileW:before {
  content: '';
  position: absolute;
}

.tileX:before,
.tileX:after {
  background: #67433E;
}

.tileY:before,
.tileY:after {
  background: #C5C500;
}

.tileZ:before,
.tileZ:after {
  background: #2E4C37;
}

.tileW:before,
.tileW:after {
  background: #3B2B45;
}

.tileX:after,
.tileY:after {
  height: 2em;
  width: 100%;
  bottom:0px;
  left: 0px;
  -webkit-transform: rotateX(-90deg) translateY(1em) translateZ(1em);
}

.tileX:before,
.tileY:before {
  height: 100%;
  width: 2em;
  right: 0px;
  -webkit-transform: rotateY(-90deg) translateZ(-1em) translateX(-1em);
}
.tileZ:after,
.tileW:after {
  width: 100%;
  height: 2em;
  bottom: 0px;
  left: 0px;
  -webkit-transform: rotateX(-90deg) translateY(1em) translateZ(1em);
}
.tileZ:before,
.tileW:before {
  height: 100%;
  width: 2em;
  right: 0px;
  -webkit-transform: rotateY(-90deg) translateZ(-1em) translateX(-1em);
}

.tileW:not(.one):after,
.tileY:before {
  z-index: -1;
}

<section>
<div class="cg_board isometric">
  <div class="house hTileY hS six"></div>
  <div class="house hTileX hS2 six"></div>
  <div class="house hTileZ hS six"></div>  
  <div class="house hTileW hS2 six"></div>
  <div class="player eg one"></div>
  <div class="player2 sp one"></div>

  <div class="player gg one"></div>
  <div class="player2 sp one"></div>
  <div class="tile tileX one"></div>
  <div class="tile tileX two"></div>
  <div class="tile tileX three"></div>
  <div class="tile tileX four"></div>
  <div class="tile tileX five"></div>
  <div class="tile tileX six"></div>
  <div class="tile tileY six"></div>
  <div class="tile tileY five"></div>
  <div class="tile tileY four"></div>
  <div class="tile tileY three"></div>
  <div class="tile tileY two"></div>
  <div class="tile tileY one"></div>
  <div class="tile tileZ one"></div>

  <div class="tile tileZ two"></div>
  <div class="tile tileZ three"></div>
  <div class="tile tileZ four"></div>
  <div class="tile tileZ five"></div>
  <div class="tile tileZ six"></div>
  <div class="tile tileW six"></div>
  <div class="tile tileW five"></div>
  <div class="tile tileW four"></div>
  <div class="tile tileW three"></div>
  <div class="tile tileW two"></div>
  <div class="tile tileW one"></div>
</div>
</section>

当我调整窗口大小时，有两个问题：

董事会向左移动，我不知道为什么。 房子有时会被切断。

它不会发生在codepen上，如果我在localhost上运行它会发生！