有这样一段代码：
html里面的内容如下：
<div class="camera"> <div class="axis"> <div class="x">x</div> <div class="y">y</div> <div class="z">z</div> </div> </div>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
解决方案
你的.axis没有设置3D视角所以当执行rotateY就当作只有2D变换，看不到3D的Z轴了
正确的代码应该是这样的
舞台设置perspective
容器设置preserve-3d
子元素rotate3d
所以代码应该改为
.camera { width: 600px; height: 600px; -webkit-perspective: 1000px; perspective: 1000px; margin: auto auto; }.axis{ -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; transform: rotateY(0deg);}