# perspective() function

Specifies a *perspective projection matrix* as a length value.
A perspective projection matrix modifies the perspective through which an element is viewed, giving an element of depth. As the value of this function increases, the further away from the viewer the element will appear.

## 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

- CSS Transforms Module, Level 3, Section 13.2

## Remarks

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

A perspective projection matrix with the parameter *length* is equivalent to the following transformation matrix: 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.

## 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); }

## See also

- Transform Functions
- Mathematical Description of Transform Functions
- Direct3D: Matrices
- Hands On: 3-D Transforms