# perspective

# perspective

This article is Ready to Use.

W3C Working Draft

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

- CSS Transforms Module, Level 3, Section 13.2

## See also

### Related pages (MSDN)

`Transform Functions`

`Mathematical Description of Transform Functions`

`Direct3D: Matrices`

`Hands On: 3-D Transforms`

## Attribution

*This article contains content originally from external sources.*

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]