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

问题描述

我有两个元素都与第一张图片相同，红色元素位于x轴中间，而黄色元素适合于x轴的100 PX：（透视图：600 PX，透视图起源：中心居中）

如第二张图片所示，在应用了translatez（100 PX）之后，

：红色元素离我越来越近，黄色元素就消失了

尽管它们都具有相同的透视图，但为什么更改位置会改变3D变换的效果？

解决方法

尽管它们都有相同的透视图，但为什么更改位置会改变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>

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

css-transforms perspective