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

Defines how many pixels away a 3D element is placed from the viewer. This allows you to change the apparent perspective of how 3D elements are viewed.

Examples

The following code snippet is an example of the perspective function in use. When applied to a square blue div element along with the translateZ function (which enables the specified element to appear to have moved away from the viewer), it has the effect illustrated in the image. (The light-blue square indicates the original position of the transformed element.)

div {
  transform: perspective(500px) translateZ(-60px);
}

Notes

Remarks

The value must be greater than 0 and is given in pixels.

For more information about transformation matrices, see Mathematical Description of Transform Functions, in the CSS3 Transforms specification. The perspective function is often necessary for other 3-D transformation functions to have a visible effect.

Syntax

perspective ( <length> )

Parameters

length
Value in pixels that specifies a perspective projection matrix. This value is expressed as a number followed by "px".

Standards information

See also

Related pages

Attributions