有这样一段代码:
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);
}