有这样一段代码：
html里面的内容如下：

<p class="camera">
    <p class="axis">
      <p class="x">x</p>
      <p class="y">y</p>
      <p class="z">z</p>
    </p>
  </p>

css代码如下：

.camera {
  width: 600px;
  height: 600px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-perspective-origin: 50% 50%;
          perspective-origin: 50% 50%;
  margin: auto auto; 
}
.axis{
  transform: rotateY(0deg);//问题在这里，给axis加上rotate之后，z轴就消失了
}
.axis .x, .axis .y, .axis .z {
  width: 300px;
  height: 0;
  position: absolute; 
}

.axis .x {
  border: 1px solid #000;
  -webkit-transform: translate(0, 150px);
          transform: translate(0, 150px); 
}

.axis .y {
  border: 1px solid red;
  -webkit-transform: rotateZ(90deg) translateX(150px);
          transform: rotateZ(90deg) translateX(150px); 
}

.axis .z {
  border: 1px solid blue;
  -webkit-transform: rotateY(90deg) translateY(150px);
          transform: rotateY(90deg) translateY(150px); 
}

问题如注释所说，希望有了解的人指教一下，下面是jsbin的链接：
jsbin