perspective

Summary

The perspective property defines how far an element is placed from the view on the z-axis, from the screen to the viewer.

Perspective defines how an object is viewed. In graphic arts, perspective is the representation on a flat surface of what the viewer’s eye would see in a 3D space. (See Wikipedia for more information about graphical perspective and for related illustrations.)

The illusion of perspective on a flat surface, such as a computer screen, is created by projecting points on the flat surface as they would appear if the flat surface were a window through which the viewer was looking at the object. In discussion of virtual environments, this flat surface is called a projection plane.

Overview table

Initial value: none
Applies to: Transformable elements.
Inherited: No
Media: visual
Computed value: Absolute length or "none".
Animatable: No

CSS Object Model Property
:

Percentages: N/A

Syntax

perspective: <length>
perspective: none

Values

none: Default.
<length>: The distance the element is placed on the z-axis. Lengths must be positive.

Examples

The following example shows the difference with transforms, where the first image has a perspective set and the second does not.

<!DOCTYPE html>
<html>
  <head>
    <title>Perspective example</title>
    <style>
      .foo {
        margin: 0 100px;
        float: left;
      }

      .bar {
        perspective: 800px;
      }

      .foo img {
        transform: rotateX(-60deg);
      }
    </style>
  </head>
  <body>
    <div class="foo bar">
      <img src="/logo/wplogo_transparent_xlg.png" />
    </div>

    <div class="foo baz">
      <img src="/logo/wplogo_transparent_xlg.png" />
    </div>
  </body>
</html>

View live example

Related specifications

CSS Transforms: Working Draft