What is the purpose of the perspective property in CSS?

The perspective property in CSS is used to give a 3D effect to elements by defining how far the object is from the viewer. It affects the distance between the z-plane and the user, creating a sense of depth. The lower the value of the perspective, the more pronounced the 3D effect will be.

Here’s a simple example:

.container {
    perspective: 1000px; /* Defines the perspective distance */
}

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transform: rotateY(45deg); /* Rotates the box in 3D space */
}

In this example, the .container element has a perspective of 1000 pixels, which affects how the .box is rendered in 3D space when it is rotated.