Question

我用z translate创建两个正方形，并在css中放入perspective-origin。这是jsbin的链接：https://jsbin.com/bebucum/edit?html,output。

以下是最相关的CSS：

.container {
  -webkit-perspective: 700;
  -webkit-perspective-origin: 450px 000px;
}

.square:nth-child(1) {
  -webkit-transform: translateZ(100px);
}
.square:nth-child(2) {
  background: yellow;
  -webkit-transform: translateZ(-200px);
}

大部分输出对我有意义。但是有一部分我不太明白。

我认为黄色正方形应该低于蓝色正方形，因为它的translateZ是负数。但输出是相反的。

有人可以帮我理解这种行为吗？

Answer 1

要实现正确的3D定位，您需要设置

transform-style: preserve-3D;

我还删除了webkit前缀，现在它们不是必需的。

.container {
  perspective: 700px;
  perspective-origin: 450px 0px;
  transform-style: preserve-3D;
}

.square {
  background: blue;
  position: relative;
  top: 300px;
  left: 300px;
  height: 100px;
  width: 100px;
}

.square:nth-child(1) {
  transform: translateZ(100px);
}

.square:nth-child(2) {
  background: yellow;
  transform: translateZ(-200px);
}

<div class="container">
  <div class="square">
  </div>
  <div class="square">
  </div>
</div>

CSS3 3D变换，z顺序不正确

1 个答案: