# perspective()

The `perspective()` CSS function defines a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were 3-dimensional. Its result is a `<transform-function>` data type.

## Try it

The `perspective()` transform function is part of the `transform` value applied on the element being transformed. This differs from the `perspective` and `perspective-origin` properties which are attached to the parent of a child transformed in 3-dimensional space.

## Syntax

The perspective distance used by `perspective()` is specified by a `<length>` value, which represents the distance between the user and the z=0 plane, or by `none`. The z=0 plane is the plane where everything appears in a 2-dimensional view, or the screen. Negative values are syntax errors. Values smaller than `1px` (including zero) are clamped to `1px`. Values other than `none` cause elements with positive z positions to appear larger, and elements with negative z positions to appear smaller. Elements with z positions equal to or larger than the perspective value disappear as though they are behind the user. Large values of perspective represent a small transformation; small values of `perspective()` represent a large transformation; `perspective(none)` represents perspective from infinite distance and no transformation.

``````perspective(d)
``````

### Values

d

Is a `<length>` representing the distance from the user to the z=0 plane. 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 transformation applies to the 3D space and can't be represented on the plane.

This transformation is not a linear transformation in ℝ^3, and can't be represented using a Cartesian-coordinate matrix. $\left(\begin{array}{cccc}1& 0& 0& 0\\ 0& 1& 0& 0\\ 0& 0& 1& 0\\ 0& 0& -1/d& 1\end{array}\right)$

## Examples

### HTML

``````<p>Without perspective:</p>
<div class="no-perspective-box">
<div class="face front">A</div>
<div class="face top">B</div>
<div class="face left">C</div>
</div>

<p>With perspective (9cm):</p>
<div class="perspective-box-far">
<div class="face front">A</div>
<div class="face top">B</div>
<div class="face left">C</div>
</div>

<p>With perspective (4cm):</p>
<div class="perspective-box-closer">
<div class="face front">A</div>
<div class="face top">B</div>
<div class="face left">C</div>
</div>
``````

### CSS

``````.face {
position: absolute;
width: 100px;
height: 100px;
line-height: 100px;
font-size: 100px;
text-align: center;
}

p + div {
width: 100px;
height: 100px;
transform-style: preserve-3d;
margin-left: 100px;
}
.no-perspective-box {
transform: rotateX(-15deg) rotateY(30deg);
}

.perspective-box-far {
transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
}

.perspective-box-closer {
transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
}

.top {
background-color: skyblue;
transform: rotateX(90deg) translate3d(0, 0, 50px);
}

.left {
background-color: pink;
transform: rotateY(-90deg) translate3d(0, 0, 50px);
}

.front {
background-color: limegreen;
transform: translate3d(0, 0, 50px);
}
``````

## Specifications

Specification
CSS Transforms Module Level 2
# funcdef-perspective

## Browser compatibility

BCD tables only load in the browser