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

如何解决为什么更改位置会改变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

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

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

解决方法

相关推荐