perspective

< css‎ | properties
Jump to: navigation, search

perspective

This article is Ready to Use.

W3C Working Draft

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.

HTML

<!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="http://www.webplatform.org/logo/wplogo_transparent_xlg.png%22 />
    </div>

    <div class="foo baz">
      <img src="http://www.webplatform.org/logo/wplogo_transparent_xlg.png%22 />
    </div>
  </body>
</html>

View live example



Related specifications

Specification Status Related Changes
CSS Transforms Working Draft

See also

Other articles

External resources