问

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

无心少年丶的诱惑发布于 2022-11-03 14:30

html

css

webkit

transform

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

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

1 个回答

你的.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);
}

2022-11-06 01:05 回答

蕶ok薍

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签