# 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

- CSS Transforms Module, Level 3, Section 13.2

## See also

### Related pages

`Transform Functions`

- Mathematical Description of Transform FunctionsMathematical Description of Transform Functions
`Direct3D: Matrices`

- Hands On: 3-D TransformsHands On: 3-D Transforms

## Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]