🎯 CSS perspective-origin Property

The perspective-origin property defines the position from which a 3D perspective is viewed in CSS. It controls the origin point of the perspective, determining where the viewer is “looking from” when rendering 3D transformed elements.

By default, the perspective origin is centered at 50% 50%, meaning the viewer looks at the middle of the element. Changing this value shifts the vanishing point and alters the depth perception of 3D elements.

The perspective-origin property defines the horizontal and vertical position of the vanishing point used in 3D transformations.

• Controls the viewing position of 3D space
• Changes the direction of depth perception
• Works together with perspective property
• Important for realistic 3D effects

• x → Horizontal axis position
• y → Vertical axis position

You can use absolute length units such as px, em, or rem to define the perspective origin precisely.

.container {
    perspective: 800px;
    perspective-origin: 100px 50px;
}
                

This moves the vanishing point 100px from the left and 50px from the top.

Percentage values are relative to the element’s size.

.container {
    perspective: 800px;
    perspective-origin: 0% 0%;
}
                

In this case, the perspective origin is set to the top-left corner of the element.

Resets the property to its default value (50% 50%).

.container {
    perspective-origin: initial;
}
                

The following example demonstrates how changing the perspective origin affects a 3D rotated object.

.container {
    perspective: 800px;
    perspective-origin: left top;
}

.card {
    transform: rotateY(45deg);
}
                

Because the perspective origin is set to the top-left corner, the 3D rotation appears to shift toward that direction.

The perspective-origin property is essential for controlling how 3D scenes are viewed in CSS. It allows developers to fine-tune the camera angle of a 3D environment.

• Adjust the 3D viewing angle
• Create dynamic perspective effects
• Improve realism in animations
• Control vanishing point positioning
• Enhance UI depth perception