The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.


< css‎ | properties
Jump to: navigation, search


This article is Ready to Use.

W3C Working Draft


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


  • perspective: <length>
  • perspective: none



The distance the element is placed on the z-axis. Lengths must be positive.


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


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

      .bar {
        perspective: 800px;

      .foo img {
        transform: rotateX(-60deg);
    <div class="foo bar">
      <img src=" />

    <div class="foo baz">
      <img src=" />

View live example

Related specifications

Specification Status Related Changes
CSS Transforms Working Draft

See also

Other articles

External resources