CSS - perspective()

The CSS function perspective() is used in the context of 3D transformations. It is used to define the perspective depth for an element, creating a 3D space in which transformations can occur. It takes a single value as an argument, which represents the distance of the viewer from the z=0 plane. The result is a <transform-function> data type.

The CSS function perspective() is a part of the transform value that is applied on an element, which is to be transformed. The difference between the perspective() function and the properties, perspective and perspective-origin is that, the latter two are related to the parent element of a child that is transformed in a three-dimensional space.

Possible value

The perspective() function takes a single parameter, which can be one of the following:

  • d: It is a <length> value that represents the distance between the user and the z=0 plane. When the value of d is either 0 or negative, then no perspective transform is applied on the element.

  • none: No perspective is set on the element.

Syntax

perspective(d)

  • Either a <length> value or none is passed to the function.

  • z=0 is the space where everything appears in the two-dimensional view.

  • Negative values are considered invalid and are syntax errors.

  • Values less than or equal to zero are clamped to 1px.

  • Any value other than none result in elements with positive z positions to appear larger, and those with negative z positions to appear smaller.

  • The elements with z positions equal to or larger than the perspective value, disappear.

  • When perspective() holds larger values, the transformation is small and vice-versa.

  • perspective(none) specifies perspective from an infinite distance and thus no transformation applied.

CSS perspective() - Basic Example

Following example demonstrates the use of perspective() function, which shows the various values of parameter d:

<html>
<head>
<style>
   .face {
      position: absolute;
      width: 100px;
      height: 100px;
      line-height: 100px;
      font-size: 100px;
      text-align: center;
   }

   p + div {
      width: 100px;
      height: 100px;
      transform-style: preserve-3d;
      margin-left: 100px;
      padding: 25px;
   }
   .without-perspective {
      transform: rotateX(-15deg) rotateY(30deg);
   }

   .with-perspective-none {
      transform: perspective(none) rotateX(-15deg) rotateY(30deg);
   }

   .with-perspective-larger {
      transform: perspective(8cm) rotateX(-15deg) rotateY(30deg);
   }

   .with-perspective-smaller {
      transform: perspective(3.1cm) rotateX(-15deg) rotateY(30deg);
   }

   .top {
      background-color:lightyellow;
      transform: rotateX(90deg) translate3d(0, 0, 50px);
   }

   .left {
      background-color:teal;
      transform: rotateY(-90deg) translate3d(0, 0, 50px);
   }

   .front {
      background-color: cadetblue;
      transform: translate3d(0, 0, 50px);
   }
</style>
</head>
<body>
   <p>Without perspective:</p>
   <div class="without-perspective">
      <div class="face front">1</div>
      <div class="face top">2</div>
      <div class="face left">3</div>
   </div>

   <p>With perspective (none):</p>
   <div class="with-perspective-none">
      <div class="face front">1</div>
      <div class="face top">2</div>
      <div class="face left">3</div>
   </div>

   <p>With perspective (8cm):</p>
   <div class="with-perspective-larger">
      <div class="face front">1</div>
      <div class="face top">2</div>
      <div class="face left">3</div>
   </div>

   <p>With perspective (3.1cm):</p>
   <div class="with-perspective-smaller">
      <div class="face front">1</div>
      <div class="face top">2</div>
      <div class="face left">3</div>
   </div>
</body>
</html>
Advertisements