🎯 CSS perspective Property

The perspective property defines how far the viewer is from the z=0 plane in a 3D CSS environment. It controls the depth effect of transformed elements and creates a realistic three-dimensional appearance.

Without a perspective value, 3D transformations such as rotateX(), rotateY(), and translateZ() appear flat because the browser has no depth reference.

The perspective property determines how dramatic or subtle a 3D effect appears.

• Adds depth to 3D transformations
• Creates realistic distance effects
• Makes nearby objects appear larger
• Makes distant objects appear smaller
• Enhances 3D animations and interfaces

No perspective is applied. Three-dimensional transformations appear without visible depth.

.container {
    perspective: none;
}
                

Specifies the distance between the viewer and the element using a length value such as pixels, em, or rem.

.container {
    perspective: 500px;
}
                

Smaller values create a stronger perspective effect, while larger values produce a more subtle depth effect.

perspective: 300px;   /* Strong depth effect */
perspective: 800px;   /* Medium depth effect */
perspective: 1500px;  /* Subtle depth effect */
                

Resets the property to its default value.

.container {
    perspective: initial;
}
                

The following example creates a simple 3D card effect using perspective and rotation.

.container {
    perspective: 800px;
}

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

Because a perspective value is defined, the rotated card appears to move in three-dimensional space rather than looking flat.

The perspective property is essential when working with CSS 3D transformations. It adds realism and depth, making animations and interfaces feel more natural and immersive.

• Create realistic 3D effects
• Enhance CSS animations
• Build interactive user interfaces
• Improve visual depth perception
• Create professional 3D web designs