what is vanishing point

There are multiple questions here, and I don't have all the answers, but I can at least tell you what the vanishing point is. When you represent scale in a 2 dimensional picture using lines that are normally parallel, you do this by making the lines not be parallel, but actually coming together at some point in the distance. Imagine looking at a painting of a railroad track from the perspective of being on the track, and it extending out in front of you forever. In the painting, if the tracks stayed parallel to each other, it would seem as though the tracks didn't go very far (or that they suddenly dropped off the edge of a cliff). But, if the tracks actually come together at the top of the painting, and other things in the distance were smaller, you would get a sense that the tracks went on for a much longer distance. This point where the tracks come together is the vanishing point. You can sort of think of it as the point that actually provides the scale for the image, because you will base the distance and size of all other things in the picture based on that point.

As for the perspective-origin, that is where it bases everything from, as if your eyes were at that point, looking at the image. If you are holding a photo directly in front of your eyes, then you slowly turn the photo, the edge that is moving away from you seems to get shorter, while the edge that gets closer to you seems to be the same, or slightly longer. If you hold the photo in front of you, but up above your eyes, and rotate it, you will notice that the corners no longer seem exactly 90 degrees, but skewed a bit. This is what the program is doing with the images based on the perspective-origin. It's different for each picture because the property is set on the container that is wrapped around all 3 photos, so the one in the center is not being impacted as much as the ones on the sides.

Now that I've said all that, I'm with you on the last part. I don't really know why they don't all skew the same when the browser size narrows to the point that it seems that the perspective-origin should be the same for all of them. I suspect it still has to do with the wrapper container and how the browser is translating that information. I'm guessing that it makes its calculations based on the combined width of the images in the container as if they're side by side, despite the fact that the container shrinks to be vertical rather than horizontal. It could be that it is recalculating based on the change, and now the perspective is different because the images are vertical rather than horizontal, but in either case, the one in the middle will have the least amount of distortion because its distance from the origin doesn't change, compared to the edges (where one is moving toward you and one moving away).

I hope this helps.