# CSS - perspective()

The `perspective()`

CSS function defines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.

## Example

TBD

## Syntax

perspective(l)

## Description

The `perspective()`

CSS function defines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.

*l*- Is a
`<length>`

giving the distance from the user to the z=0 plane. It is used to apply a perspective transform to the element. If it is 0 or a negative value, no perspective transform is applied.

Cartesian coordinates on ℝ^{2} |
Homogeneous coordinates on ℝℙ^{2} |
Cartesian coordinates on ℝ^{3} |
Homogeneous coordinates on ℝℙ^{3} |
---|---|---|---|

This transform applies to the 3D space and cannot be represented on the plan. |
A perspective is not a linear transform in ℝ^{3} and cannot be represented using a matrix in the Cartesian coordinates system. |
$\left(\begin{array}{ccc}10& 0& 0\\ 01& 0& 0\\ 0& 0& 1& 0\\ 0& 0& -1/d& 1\end{array}\right)$ |

## License

© 2016 Mozilla Contributors

Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

https://developer.mozilla.org/en-us/docs/web/css/transform-function/perspective