为什么改变位置会改变3D变换的效果？

Question

我有两个元素都与第一张图所示相同，红色的在 x 轴中间，黄色的在 x 轴的 100 PX 处：（透视：600 PX 和透视原点：中心中心）

应用 translatez (100 PX) 后，如第二张图所示：红色元素靠近我，黄色元素向左

虽然两个人的透视图是一样的，但为什么改变位置就改变了3D变换的效果？

Answer 1

although both of them has the same perspective view why changing their position changed the effect of 3D transform ?

他们有相同的视角，是的，但诀窍在于 perspective-origin 设置为父元素（而不是元素）的中心。你的红色元素已经在中心所以它只会靠近你而黄色元素不在中心所以它的移动会有所不同。

为了更好地说明这里是另一个使用旋转变换的例子。

.container {
  border:2px solid red;
  perspective:300px;
  perspective-origin:50% 50%;
  padding:20px;
  display:flex;
  justify-content:space-around;
}

.container > div {
  width:50px;
  height:50px;
  background:blue;
  transform:rotateY(20deg);
}

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

<div class="container" style="perspective-origin:10% 50%">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="container" style="perspective-origin:70% 50%">
  <div></div>
  <div></div>
  <div></div>
</div>

在所有情况下，我们都有相同的转换，相同的视角，但我们改变了 perspective-origin，我们得到了不同的结果。将原点视为您在 3D 世界中查看元素的位置。

所有的转换都会得到相同的结果，但我们从不同的角度看它们，所以视觉结果不会相同。

同样的逻辑适用于你的情况，红色放在你的前面，所以它只会向你移动，而黄色放在一边，所以它会给你一种向左走的错觉。

如果我们考虑将 perspetive() 应用于元素，那么我们可以看到所有

的相同结果

.container {
  border: 2px solid red;
  padding: 20px;
  display: flex;
  justify-content: space-around;
  transform-origin: 50% 50%;
}

.container>div {
  width: 50px;
  height: 50px;
  background: blue;
  transform: perspective(300px) rotateY(20deg);
  transform-origin: inherit;
}

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

<div class="container" style="transform-origin:10% 50%">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="container" style="transform-origin:70% 50%">
  <div></div>
  <div></div>
  <div></div>
</div>

为什么改变位置会改变3D变换的效果？

Why changing the position changes the effect of 3D transform?

css

perspective

css-transforms