CSS - perspective()

The CSS function perspective() is used in the context of 3D transformations. It is used to define the perspective depth for an element, creating a 3D space in which transformations can occur. It takes a single value as an argument, which represents the distance of the viewer from the z=0 plane. The result is a <transform-function> data type.

The CSS function perspective() is a part of the transform value that is applied on an element, which is to be transformed. The difference between the perspective() function and the properties, perspective and perspective-origin is that, the latter two are related to the parent element of a child that is transformed in a three-dimensional space.

Possible value

The perspective() function takes a single parameter, which can be one of the following:

d: It is a <length> value that represents the distance between the user and the z=0 plane. When the value of d is either 0 or negative, then no perspective transform is applied on the element.
none: No perspective is set on the element.

Syntax

 perspective(d)

Either a <length> value or none is passed to the function.
z=0 is the space where everything appears in the two-dimensional view.
Negative values are considered invalid and are syntax errors.
Values less than or equal to zero are clamped to 1px.
Any value other than none result in elements with positive z positions to appear larger, and those with negative z positions to appear smaller.
The elements with z positions equal to or larger than the perspective value, disappear.
When perspective() holds larger values, the transformation is small and vice-versa.
perspective(none) specifies perspective from an infinite distance and thus no transformation applied.

CSS perspective() - Basic Example

Following example demonstrates the use of perspective() function, which shows the various values of parameter d:

 <html> <head> <style> .face { position: absolute; width: 100px; height: 100px; line-height: 100px; font-size: 100px; text-align: center; } p + div { width: 100px; height: 100px; transform-style: preserve-3d; margin-left: 100px; padding: 25px; } .without-perspective { transform: rotateX(-15deg) rotateY(30deg); } .with-perspective-none { transform: perspective(none) rotateX(-15deg) rotateY(30deg); } .with-perspective-larger { transform: perspective(8cm) rotateX(-15deg) rotateY(30deg); } .with-perspective-smaller { transform: perspective(3.1cm) rotateX(-15deg) rotateY(30deg); } .top { background-color:lightyellow; transform: rotateX(90deg) translate3d(0, 0, 50px); } .left { background-color:teal; transform: rotateY(-90deg) translate3d(0, 0, 50px); } .front { background-color: cadetblue; transform: translate3d(0, 0, 50px); } </style> </head> <body> <p>Without perspective:</p> <div class="without-perspective"> <div class="face front">1</div> <div class="face top">2</div> <div class="face left">3</div> </div> <p>With perspective (none):</p> <div class="with-perspective-none"> <div class="face front">1</div> <div class="face top">2</div> <div class="face left">3</div> </div> <p>With perspective (8cm):</p> <div class="with-perspective-larger"> <div class="face front">1</div> <div class="face top">2</div> <div class="face left">3</div> </div> <p>With perspective (3.1cm):</p> <div class="with-perspective-smaller"> <div class="face front">1</div> <div class="face top">2</div> <div class="face left">3</div> </div> </body> </html>

Print Page