CSS perspective-origin

The CSS perspective-origin property is used to define the position of perspective. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a, .b, .c, .d{width: 120px; height: 120px; margin-left: 64px;
         perspective: 260px; border: 1px solid peru;}
      .a{perspective-origin: right;}
      .b{perspective-origin: left;}
      .c{perspective-origin: top;}
      .d{perspective-origin: bottom;}
      .a1, .b1, .c1, .d1 {width: 120px; height: 120px; background: crimson;
         transform-style: preserve-3d; transform: rotateX(45deg);}
</style>
</head>
<body>
   
   <h2>perspective-origin: right</h2>
   <div class="a">
      <div class="a1"></div>
   </div>

   <h2>perspective-origin: left</h2>
   <div class="b">
      <div class="b1"></div>
   </div>

   <h2>perspective-origin: top</h2>
   <div class="c">
      <div class="c1"></div>
   </div>

   <h2>perspective-origin: bottom</h2>
   <div class="d">
      <div class="d1"></div>
   </div>

</body>
</html>

Output

perspective-origin: right

perspective-origin: left

perspective-origin: top

perspective-origin: bottom

Note - The perspective-origin property must be used together with the perspective property.

Note - The perspective places the view front or back from z=0 plane.

CSS perspective-origin Syntax

The syntax of perspective-origin property in CSS, is:

perspective-origin: x-axis y-axis;

The x-axis parameter is used to define, where the view should be placed on x-axis, and its value should be any of the following:

left - places the view at left on x-axis
right - places the view at right on x-axis
center - places the view at center on x-axis
length - We can also use custom length like 20px, 2em etc. to place the view at required position on x-axis

The y-axis parameter is used to define where the view should be placed on y-axis, and its value should be any of the following:

top - places the view at top on y-axis
bottom - places the view at bottom on y-axis
center - places the view at center on y-axis
length - We can also use custom length like 30px, 1.4em etc. to place the view at required position on y-axis

Note - The default value of both x-axis and y-axis parameter is 50%

Note - The initial and inherit keyword can also be used to define the perspective-origin property. The initial is used to use the default value, whereas inherit is used to use the value inherited by the parent element.

CSS perspective-origin Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a, .b, .c, .d, .e, .f, .g, .h, .i{width: 120px; height: 120px; margin-left: 100px;
         perspective: 260px; border: 1px solid peru;}
      .a{perspective-origin: right bottom;}
      .b{perspective-origin: right top;}
      .c{perspective-origin: center top;}
      .d{perspective-origin: 10% 60%;}
      .e{perspective-origin: 10% 120%;}
      .f{perspective-origin: 10% 220%;}
      .g{perspective-origin: 220% 20%;}
      .h{perspective-origin: 440% 120%;}
      .i{perspective-origin: 60px 200px;}
      .a1, .b1, .c1, .d1, .e1, .f1, .g1, .h1, .i1 {width: 120px; height: 120px;
         background: crimson; transform-style: preserve-3d; transform: rotateX(45deg);}
</style>
</head>
<body>
   
   <h2>perspective-origin: right bottom</h2>
   <div class="a">
      <div class="a1"></div>
   </div>

   <h2>perspective-origin: right top</h2>
   <div class="b">
      <div class="b1"></div>
   </div>

   <h2>perspective-origin: center top</h2>
   <div class="c">
      <div class="c1"></div>
   </div>

   <h2>perspective-origin: 10% 60%</h2>
   <div class="d">
      <div class="d1"></div>
   </div>

   <h2>perspective-origin: 10% 120%</h2>
   <div class="e">
      <div class="e1"></div>
   </div>

   <h2>perspective-origin: 10% 220%</h2>
   <div class="f">
      <div class="f1"></div>
   </div>

   <h2>perspective-origin: 220% 20%</h2>
   <div class="g">
      <div class="g1"></div>
   </div>

   <h2>perspective-origin: 440% 120%</h2>
   <div class="h">
      <div class="h1"></div>
   </div>

   <h2>perspective-origin: 60px 200px</h2>
   <div class="i">
      <div class="i1"></div>
   </div>

</body>
</html>