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

I have two element both with the same as shown in the first picture the red one in the middle of x-axis and the yellow one is suited at 100 PX of x-axis: ( perspective : 600 PX and perspective-origin:center center )

after applying translatez (100 PX) as shown in the second picture: the red element came closer to me and the yellow went left

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

Solution

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

They have the same perspective, yes but the trick is in the perspective-origin which is set to be the center of the parent element (not the elements). Your Red element is already in center so it will only comes close to your while the yellow element isn't in the center so its movement will be different.

To better illustrate here is another example using a rotate transformation.

.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>

In all the cases, we have the same transformation, the same perspective but we change the perspective-origin and we get a different result. Consider the origin as the place where you are looking at your element in the 3D world.

All the tranformation will give the same result but we look at them from different angle so the visual result won't be the same.

The same logic apply to your case, the red is placed in front of your so it will only move to you while the yellow is placed on the side so it will give you the illusion of going to the left.

If we consider perspetive() applied to the element then we can see the same result for all

.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>