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:

css perspective property example

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:

css perspective 0 distance example

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>
      .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;}
   <h2>perspective: none</h2>
   <div class="a">
      <div class="a1"></div>

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

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

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


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:

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 »

Liked this post? Share it!