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

Question

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

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

虽然他们都有相同的透视图，但为什么改变他们的位置会改变 3D 变换的效果？

Answer 1

虽然他们都有相同的透视图，但为什么改变他们的位置会改变 3D 变换的效果？

它们具有相同的视角，是的，但诀窍在于 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>

在所有情况下，我们都有相同的转换，相同的视角，但我们改变了视角的原点，我们得到了不同的结果。将原点视为您在 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>

更多细节的相关问题：

perspective and translateZ moves diagonally

How to calculate angle of rotation to make width fit desired size in perspective mode?

CSS 3d transform doesn't work if perspective is set in the end of property