This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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

See also

Other articles

External resources