CSS - perspective-origin Property

The CSS property perspective-origin specifies the position at which viewer / user is looking. This position is used as the vanishing point by the CSS property perspective.

The properties perspective-origin and perspective are linked to the parent of a child transformed in the three-dimensional space; whereas the transform function perspective() is linked to the element that is being transformed.

Possible values

The CSS property perspective-origin can have one of the following values:

1. x-position: Specifies the position of the abscissa (x-axis) of the vanishing point. It can have one of the given values:

  • <length-percentage>: Specifies the position as an absolute length value or relative to the element's width. Value may be negative.

  • left: keyword for length value 0.

  • center: keyword for length value 50% percentage value.

  • right: keyword for length value 100% percentage value.

2. y-position: Specifies the position of the ordinate (y-axis) of the vanishing point. It can have one of the given values:

  • <length-percentage>: Specifies the position as an absolute length value or relative to the element's width. Value may be negative.

  • top: keyword for length value 0.

  • center: keyword for length value 50% percentage value.

  • bottom: keyword for length value 100% percentage value.

Applies to

All transformable elements.

Syntax

Following are the different ways in which perspective-origin property can be specified:

/* One-value syntax */
perspective-origin = x-position;

/* Two-value syntax */
perspective-origin = x-position y-position;

/* x-position and y-position values are keywords, following syntax is valid */
perspective-origin = y-position x-position;

/* Global values */
perspective-origin: inherit;
perspective-origin: initial;
perspective-origin: revert;
perspective-origin: revert-layer;
perspective-origin: unset;

CSS perspective-origin - x-position (Keyword)

Following example demonstrates the use of CSS property perspective-origin with One-value syntax (Keyword value).

<html>
<head>
<style>
   .container {
      width: 150px;
      height: 150px;
      border: none;
      display: block;
   }

   .cube {
      width: 30%;
      height: 30%;
      perspective: 350px;
      transform-style: preserve-3d;
      margin-bottom: 80px;
      padding: 10px;
   }

   .face {
      position: absolute;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      line-height: 80px;
      font-size: 3.5em;
      color: white;
      text-align: center;
   }

   .front {
      background: rgba(100, 0, 100, 0.2);
      transform: translateZ(50px);
   }

   .back {
      background: rgba(178, 178, 0, 0.5);
      color: black;
      transform: rotateY(180deg) translateZ(50px);
   }

   .right {
      background: rgba(0, 0, 178, 0.5);
      transform: rotateY(90deg) translateZ(50px);
   }

   .left {
      background: rgba(178, 0, 0, 0.5);
      transform: rotateY(-90deg) translateZ(50px);
   }

   .top {
      background: rgba(0, 200, 0);
      transform: rotateX(90deg) translateZ(50px);
   }

   .bottom {
      background: rgba(0, 0, 0, 0.2);
      transform: rotateX(-90deg) translateZ(50px);
   } 

   .po-left {
      perspective-origin: left;
   }

   .po-right {
      perspective-origin: right;
   }

   .po-center {
      perspective-origin: center;
   }
</style>
</head>
<body>   
   <h1>perspective-origin - x-position</h1> 
   <div class="container">
   <p>perspective-origin: left</p>
   <div class="cube po-left">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>

   <p>perspective-origin: center</p>
   <div class="cube po-center">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>

   <p>perspective-origin: right</p>
   <div class="cube po-right">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>
   </div>   
</body>
</html>

CSS perspective-origin - x-position (length)

Following example demonstrates the use of CSS property perspective-origin with One-value syntax (length value), both positive and negative values.

<html>
<head>
<style>
   .container {
      width: 150px;
      height: 150px;
      border: none;
      display: block;
   }

   .cube {
      width: 30%;
      height: 30%;
      perspective: 350px;
      transform-style: preserve-3d;
      margin-bottom: 80px;
      padding: 20px;
   }

   .face {
      position: absolute;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      line-height: 80px;
      font-size: 3.5em;
      color: white;
      text-align: center;
   }

   .front {
      background: rgba(100, 0, 100, 0.2);
      transform: translateZ(50px);
   }

   .back {
      background: rgba(178, 178, 0, 0.5);
      color: black;
      transform: rotateY(180deg) translateZ(50px);
   }

   .right {
      background: rgba(0, 0, 178, 0.5);
      transform: rotateY(90deg) translateZ(50px);
   }

   .left {
      background: rgba(178, 0, 0, 0.5);
      transform: rotateY(-90deg) translateZ(50px);
   }

   .top {
      background: rgba(0, 200, 0);
      transform: rotateX(90deg) translateZ(50px);
   }

   .bottom {
      background: rgba(0, 0, 0, 0.2);
      transform: rotateX(-90deg) translateZ(50px);
   } 

   .po-length-cm {
      perspective-origin: 10cm;
   }

   .po-length-em {
      perspective-origin: 20em;
   }

   .po-length-px {
      perspective-origin: 200px;
   }

   .po-length-neg {
      perspective-origin: -200px;
   }
</style>
</head>
<body>   
   <center>
   <h1>perspective-origin - x-position</h1> 
   <div class="container">
   <p>perspective-origin: 10cm</p>
   <div class="cube po-length-cm">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>

   <p>perspective-origin: 20em</p>
   <div class="cube po-length-em">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>

   <p>perspective-origin: 200px</p>
   <div class="cube po-length-px">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>

   <p>perspective-origin: -200px</p>
   <div class="cube po-length-neg">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>
   </div>   
</center>
</body>
</html>

CSS perspective-origin - x-position (Percentage)

Following example demonstrates the use of CSS property perspective-origin with One-value syntax (Percentage value), both positive and negative values.

<html>
<head>
<style>
   .container {
      width: 150px;
      height: 150px;
      border: none;
      display: block;
   }

   .cube {
      width: 30%;
      height: 30%;
      perspective: 350px;
      transform-style: preserve-3d;
      margin-bottom: 80px;
      padding: 20px;
   }

   .face {
      position: absolute;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      line-height: 80px;
      font-size: 3.5em;
      color: white;
      text-align: center;
   }

   .front {
      background: rgba(100, 0, 100, 0.2);
      transform: translateZ(50px);
   }

   .back {
      background: rgba(178, 178, 0, 0.5);
      color: black;
      transform: rotateY(180deg) translateZ(50px);
   }

   .right {
      background: rgba(0, 0, 178, 0.5);
      transform: rotateY(90deg) translateZ(50px);
   }

   .left {
      background: rgba(178, 0, 0, 0.5);
      transform: rotateY(-90deg) translateZ(50px);
   }

   .top {
      background: rgba(0, 200, 0);
      transform: rotateX(90deg) translateZ(50px);
   }

   .bottom {
      background: rgba(0, 0, 0, 0.2);
      transform: rotateX(-90deg) translateZ(50px);
   } 

   .po-per-positive {
      perspective-origin: 200%;
   }

   .po-per-negative {
      perspective-origin: -200%;
   }
</style>
</head>
<body>   
   <center>
   <h1>perspective-origin - x-position</h1> 
   <div class="container">
   <p>perspective-origin: 200%</p>
   <div class="cube po-per-positive">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>

   <p>perspective-origin: -200%</p>
   <div class="cube po-per-negative">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>
   </div>   
</center>
</body>
</html>

CSS perspective-origin - y-position (Keyword)

Following example demonstrates the use of CSS property perspective-origin with One-value syntax (Keyword value).

<html>
<head>
<style>
   .container {
      width: 150px;
      height: 150px;
      border: none;
      display: block;
   }

   .cube {
      width: 30%;
      height: 30%;
      perspective: 350px;
      transform-style: preserve-3d;
      margin-bottom: 80px;
      padding: 20px;
   }

   .face {
      position: absolute;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      line-height: 80px;
      font-size: 3.5em;
      color: white;
      text-align: center;
   }

   .front {
      background: rgba(100, 0, 100, 0.2);
      transform: translateZ(50px);
   }

   .back {
      background: rgba(178, 178, 0, 0.5);
      color: black;
      transform: rotateY(180deg) translateZ(50px);
   }

   .right {
      background: rgba(0, 0, 178, 0.5);
      transform: rotateY(90deg) translateZ(50px);
   }

   .left {
      background: rgba(178, 0, 0, 0.5);
      transform: rotateY(-90deg) translateZ(50px);
   }

   .top {
      background: rgba(0, 200, 0);
      transform: rotateX(90deg) translateZ(50px);
   }

   .bottom {
      background: rgba(0, 0, 0, 0.2);
      transform: rotateX(-90deg) translateZ(50px);
   } 

   .po-y-top {
      perspective-origin: top;
   }

   .po-y-center {
      perspective-origin: center;
   }

   .po-y-bottom {
      perspective-origin: bottom;
   }
</style>
</head>
<body>   
   <center>
   <h1>perspective-origin: y-position (keyword)</h1> 
   <div class="container">
   <p>perspective-origin: top</p>
   <div class="cube po-y-top">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>

   <p>perspective-origin: center</p>
   <div class="cube po-y-center">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>

   <p>perspective-origin: bottom</p>
   <div class="cube po-y-bottom">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>
   </div>   
   </center>
</body>
</html>

CSS perspective-origin -x-position, y-position (Keywords)

Following example demonstrates the use of CSS property perspective-origin with Two-value syntax (Keyword values).

<html>
<head>
<style>
   .container {
      width: 150px;
      height: 150px;
      border: none;
      display: block;
   }

   .cube {
      width: 30%;
      height: 30%;
      perspective: 350px;
      transform-style: preserve-3d;
      margin-bottom: 80px;
      padding: 20px;
   }

   .face {
      position: absolute;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      line-height: 80px;
      font-size: 3.5em;
      color: white;
      text-align: center;
   }

   .front {
      background: rgba(100, 0, 100, 0.2);
      transform: translateZ(50px);
   }

   .back {
      background: rgba(178, 178, 0, 0.5);
      color: black;
      transform: rotateY(180deg) translateZ(50px);
   }

   .right {
      background: rgba(0, 0, 178, 0.5);
      transform: rotateY(90deg) translateZ(50px);
   }

   .left {
      background: rgba(178, 0, 0, 0.5);
      transform: rotateY(-90deg) translateZ(50px);
   }

   .top {
      background: rgba(0, 200, 0);
      transform: rotateX(90deg) translateZ(50px);
   }

   .bottom {
      background: rgba(0, 0, 0, 0.2);
      transform: rotateX(-90deg) translateZ(50px);
   } 

   .po-left-top {
      perspective-origin: left top;
   }

   .po-center-bottom {
      perspective-origin: center bottom;
   }

   .po-right-bottom {
      perspective-origin: right bottom;
   }
</style>
</head>
<body>   
   <center>
   <h1>perspective-origin: x-position y-position (keyword)</h1> 
   <div class="container">
   <p>perspective-origin: left top</p>
   <div class="cube po-left-top">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>

   <p>perspective-origin: center bottom</p>
   <div class="cube po-center-bottom">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>

   <p>perspective-origin: right bottom</p>
   <div class="cube po-right-bottom">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>
   </div>   
   </center>
</body>
</html>

CSS perspective-origin - x-position y-position (Percentage)

Following example demonstrates the use of CSS property perspective-origin with Two-value syntax (Percentage values), both positive and negative values.

<html>
<head>
<style>
   .container {
      width: 150px;
      height: 150px;
      border: none;
      display: block;
   }

   .cube {
      width: 30%;
      height: 30%;
      perspective: 350px;
      transform-style: preserve-3d;
      margin-bottom: 80px;
      padding: 20px;
   }

   .face {
      position: absolute;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      line-height: 80px;
      font-size: 3.5em;
      color: white;
      text-align: center;
   }

   .front {
      background: rgba(100, 0, 100, 0.2);
      transform: translateZ(50px);
   }

   .back {
      background: rgba(178, 178, 0, 0.5);
      color: black;
      transform: rotateY(180deg) translateZ(50px);
   }

   .right {
      background: rgba(0, 0, 178, 0.5);
      transform: rotateY(90deg) translateZ(50px);
   }

   .left {
      background: rgba(178, 0, 0, 0.5);
      transform: rotateY(-90deg) translateZ(50px);
   }

   .top {
      background: rgba(0, 200, 0);
      transform: rotateX(90deg) translateZ(50px);
   }

   .bottom {
      background: rgba(0, 0, 0, 0.2);
      transform: rotateX(-90deg) translateZ(50px);
   } 

   .po-per-positive {
      perspective-origin: 250% 100%;
   }

   .po-per-negative {
      perspective-origin: -200% -100%;
   }
</style>
</head>
<body>   
   <center>
   <h1>perspective-origin: x-position y-position</h1> 
   <div class="container">
   <p>perspective-origin: 250% 100%</p>
   <div class="cube po-per-positive">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>

   <p>perspective-origin: -200% -100%</p>
   <div class="cube po-per-negative">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>
   </div>   
</center>
</body>
</html>

CSS perspective-origin - x-position y-position (Length)

Following example demonstrates the use of CSS property perspective-origin with Two-value syntax (length values), both positive and negative values.

<html>
<head>
<style>
   .container {
      width: 150px;
      height: 150px;
      border: none;
      display: block;
   }

   .cube {
      width: 30%;
      height: 30%;
      perspective: 350px;
      transform-style: preserve-3d;
      margin-bottom: 80px;
      padding: 20px;
   }

   .face {
      position: absolute;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      line-height: 80px;
      font-size: 3.5em;
      color: white;
      text-align: center;
   }

   .front {
      background: rgba(100, 0, 100, 0.2);
      transform: translateZ(50px);
   }

   .back {
      background: rgba(178, 178, 0, 0.5);
      color: black;
      transform: rotateY(180deg) translateZ(50px);
   }

   .right {
      background: rgba(0, 0, 178, 0.5);
      transform: rotateY(90deg) translateZ(50px);
   }

   .left {
      background: rgba(178, 0, 0, 0.5);
      transform: rotateY(-90deg) translateZ(50px);
   }

   .top {
      background: rgba(0, 200, 0);
      transform: rotateX(90deg) translateZ(50px);
   }

   .bottom {
      background: rgba(0, 0, 0, 0.2);
      transform: rotateX(-90deg) translateZ(50px);
   } 

   .po-len-positive {
      perspective-origin: 250px 100px;
   }

   .po-len-negative {
      perspective-origin: -200px -100px;
   }
</style>
</head>
<body>   
   <center>
   <h1>perspective-origin: x-position y-position</h1> 
   <div class="container">
   <p>perspective-origin: 250px 100px</p>
   <div class="cube po-len-positive">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>

   <p>perspective-origin: -200px -100px</p>
   <div class="cube po-len-negative">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
   </div>
   </div>   
</center>
</body>
</html>
Advertisements