CSS - perspective Property

The CSS property perspective specifies the distance between the z=0 plane and the user. It helps in providing some perspective to a 3D-positioned element.

  • The value of perspective property determines the effect's strength.

  • The transformation will be small with larger values of perspective and large transformations with smaller perspective values.

  • Each 3D element with z>0 will be larger and with z<0 will be smaller.

  • When the value of z-axis coordinates is greater than the value of perspective, the element can not be drawn on the three-dimensional space.

  • By default the vanishing point, i.e., the position at which viewer / user is looking, is center.

  • Vanishing point can be changed using the CSS property perspective-origin.

  • When a value is passed other than none to this property, it acts like a containing block for elements with position: fixed value.

Possible values

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

1. none: No perspective transform is applied.

2. <length>: Specifies the distance from the user to the z=0 plane.

  • Applies a perspective transform to the children of the element.

  • Negative values are not permitted and considered as syntax error.

  • Value lesser than 1px is clamped to 1px.

Applies to

All transformable elements.

Syntax

perspective = none | <length>

CSS perspective - <length> Values

Following example demonstrates the use of CSS property perspective with various values of unit <length>.

<html>
<head>
<style>
   .container {
      width: 150px;
      height: 150px;
      margin: 75px 0 0 75px;
      border: none;
   }

   .cube {
      width: 50%;
      height: 50%;
      perspective-origin: 120% 120%;
      transform-style: preserve-3d;
      padding: 50px;
   }

   .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(178, 0, 178, 0.5);
      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);
   } 

   
   .length-cm {
      perspective: 10cm;
   }

   .length-em {
      perspective: 15em;
   }

   .length-px {
      perspective: 200px;
   }

   .length-neg {
      perspective: -100px;
   }
   
</style>
</head>
<body>   
   <h1>perspective</h1>
   
   <div class="container">
   <p>perspective: 10cm</p>
   <div class="cube 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: 15em</p>
   <div class="cube 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: 200px</p>
   <div class="cube 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: -100px</p>
   <div class="cube 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>   
</body>
</html>

CSS perspective - none Value

Following example demonstrates the use of CSS property perspective with value as none.

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

   .cube {
      width: 50%;
      height: 50%;
      perspective: none;
      perspective-origin: 120% 120%;
      transform-style: preserve-3d;
   }

   .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(178, 0, 178, 0.5);
      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);
   } 
</style>
</head>
<body>   
   <div class="container">
   <p>perspective: none</p>
   <div class="cube">
      <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>
Advertisements