html5 - 关于css3 3d-transform的一个问题

问题描述

问 题

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

这篇关于html5 - 关于css3 3d-transform的一个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！