W3docs
en
Log in

CSS perspective Property

Use the perspective CSS property to give a 3D element a perspective. See property values and examples.

The perspective property gives a 3D-positioned element some perspective and determines the distance between the z=0 plane and the viewer.

A 3D element with z > 0 becomes larger, a 3D element with z < 0 becomes smaller.

The perspective property accepts a length value. Zero is valid, while negative values are treated as positive.

The perspective property is one of the CSS3 properties.

Info

The major difference between the perspective property and the perspective() value of the transform property is the following: the perspective property does not affect the element itself; it only applies a perspective view to its child elements. Whereas the perspective() function applies depth directly to the element it is applied to.

Info

Modern browsers fully support this property without vendor prefixes.

Initial Valuenone
Applies toTransformable elements.
InheritedNo.
AnimatableYes. The transformation of the perspective is animatable.
VersionCSS3
DOM Syntaxobject.style.perspective = "70px";

Syntax

CSS perspective syntax

perspective: length | none | initial | inherit;

Example of the perspective property:

CSS perspective code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the element</title>
    <style>
        .element1 {
        padding: 50px;
        position: absolute;
        border: 1px solid #666;
        background-color: #1c87c9;
        background: #8ebf42;
        -webkit-transform-style: preserve-3d;/* Safari 3-8  */
        -webkit-transform: rotateX(40deg);/* Safari 3-8  */
        transform-style: preserve-3d;
        transform: rotateX(40deg);
      }
      .element2 {
        position: relative;
        height: 160px;
        width: 160px;
        margin-left: 20px;
        border: 1px solid #000;
        -webkit-perspective: none;/* Safari 4-8  */
        perspective: none;
      }
    </style>
  </head>
  <body>
    <h2>Perspective property example</h2>
    <h3>perspective: none:</h3>
    <div class="element2">
      Box2
      <div class="element1">Box1</div>
    </div>
  </body>
</html>
Try it Yourself »

Result

CSS perspective with px

Example of the perspective property specified as 100px:

CSS perspective with px example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the element</title>
    <style>
        .element1 {
        padding: 50px;
        position: absolute;
        border: 1px solid #666;
        background-color: #1c87c9;
        background: #8ebf42;
        -webkit-transform-style: preserve-3d;/* Safari 3-8  */
        -webkit-transform: rotateX(40deg);/* Safari 3-8  */
        transform-style: preserve-3d;
        transform: rotateX(40deg);
      }
      .element2 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 50px;
        border: 1px solid #000;
        -webkit-perspective: 100px;/* Safari 4-8  */
        perspective: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Perspective property example</h2>
    <h3>perspective: 100px:</h3>
    <div class="element2">
      Box2
      <div class="element1">Box1</div>
    </div>
  </body>
</html>
Try it Yourself »

Values

ValueDescription
lengthApplies a perspective transform to the element and its content.
noneApplies no perspective transform.
initialMakes the property use its default value.
inheritInherits the property from its parents element.

Practice

Practice

What does the CSS 'perspective' property do?