If you’ve ever studied how to draw in perspective, the perspective-origin property will feel like old hat. To draw in perspective, you first make a point on your page or canvas. This point is known as the vanishing point. It’s the point in your drawing at which items will theoretically disappear from view.
Next, draw a shape of your choosing. We’ll keep this example simple by using a rectangle.
Step three is to draw a series of lines towards the vanishing point, as shown in the image below. These lines, also known as convergence lines, serve as guides for drawing shapes that are sized appropriately given their perceived distance from the viewer.
As you can see in the following image, the rectangles that appear closer to the viewer are larger. Those that appear further away are smaller.
This is essentially how the perspective-origin property works. It sets the coordinates of the vanishing point for the stage. Negative Y values give the impression that the viewer is looking down at the stage, while positive ones imply looking up from below it. Negative X values mimic the effect of looking from the right of the stage. Positive X values mimic looking from its left. The following image shows a containing element with a perspective-origin of -50% -50% .
As with transform-origin , the initial value of perspective-origin is 50% 50% —the center point of the containing element. Values for perspective-origin may be lengths or percentages.
Positioning keywords— left , right, top , bottom , and center —are also valid. The center keyword is the same as 50% 50%. Both bottom and right compute to positions of 100% along the vertical and horizontal positions respectively. The top and left keywords compute to vertical and horizontal positions of 0% . In all cases, perspective-origin is an offset from the top-left corner of the container.
Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.