CSS perspective Property

The CSS perspective property is used to define 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 the 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 CSS perspective property:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a{perspective: none;}
      .b{perspective: 160px;}
      .c{perspective: 280px;}
      .d{perspective: 800px;}
      .a1, .b1, .c1, .d1 {height: 80px; width: 80px; border: 1px solid;
         background: crimson; transform: rotateX(25deg); margin-left: 74px;}
</style>
</head>
<body>
   
   <h2>perspective: none</h2>
   <div class="a">
      <div class="a1"></div>
   </div>

   <h2>perspective: 160px</h2>
   <div class="b">
      <div class="b1"></div>
   </div>

   <h2>perspective: 280px</h2>
   <div class="c">
      <div class="c1"></div>
   </div>

   <h2>perspective: 800px</h2>
   <div class="d">
      <div class="d1"></div>
   </div>

</body>
</html>

Output

perspective: none

perspective: 160px

perspective: 280px

perspective: 800px

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 property.

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

CSS perspective Property Syntax

The syntax of perspective property in CSS, is:

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 define custom perspective
initial - used to use the default value
inherit - used to use the value inherited by the parent element

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

CSS Online Test

« Previous Tutorial Next Tutorial »