CSS perspective() Function

The CSS perspective() function is used to define the transform property, to set the distance between the user and the z=0 plane (the computer screen of web page). For example, the following figure shows the same 3D box (a die) with different perspectives:

Now an interesting question is, what if we set perspective to 0 ?
In that case, since the distance between user and the plane (z=0) becomes 0, therefore, the same 3D box looks like:

Now, we can say that, lower perspective value gives more 3D viewing angle of an element/object. Let's create an example of perspective() function:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{height: 80px; width: 80px; background: crimson; margin-left: 40px;}
      .a{transform: perspective(none) rotateX(25deg);}
      .b{transform: perspective(40px) rotateX(25deg);}
      .c{transform: perspective(80px) rotateX(25deg);}
      .d{transform: perspective(540px) rotateX(25deg);}
</style>
</head>
<body>
   
   <h2>perspective(none)</h2>
   <div class="a"></div>

   <h2>perspective(40px)</h2>
   <div class="b"></div>

   <h2>perspective(80px)</h2>
   <div class="c"></div>

   <h2>perspective(540px)</h2>
   <div class="d"></div>

</body>
</html>

Output

perspective(none)

perspective(40px)

perspective(80px)

perspective(540px)

Note - In some transformation like on z-axis, the effect can not be seen in 2D plane, therefore we need to place the view front or back from z=0 plane, using of course the perspective() function.

Note - The rotateX() function rotates an element along x-axis.

CSS perspective() Function Syntax

The syntax of perspective() function in CSS, is:

transform: perspective(value);

The value may be any of the following:

none - used not to set the perspective. This is the default value, same as perspective(0)
length - used to apply custom perspective
initial - used to use the default value
inherit - used to use the value inherited by the parent element

Note - The perspective() function does similar job as of perspective property. The only difference is, perspective() function applies to an element to set the perspective view to the parent element itself, whereas the perspective property is used to set the perspective view to its child elements.

CSS Online Test

« Previous Tutorial Next Tutorial »