We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

perspective()

The `perspective()` CSS function defines a transformation that sets the distance between the user and the z=0 plane. Its result is a `<transform-function>` data type.

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. A positive value makes the element appear closer to the user, a negative value farther.

```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}{ccc}10& 0& 0\\ 01& 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 (7.5cm):</p>
<div class="perspective-box">
<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;
}

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

.perspective-box {
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform: perspective(7.5cm) rotateX(-15deg) rotateY(15deg);
margin-left: 100px;
}

.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);
}
```

Browser compatibility

Please see the `<transform-function>` data type for compatibility info.

Document Tags and Contributors

Tags:
Contributors to this page: wbamberg, mfluehr, JSideris, Sebastianz, mrstork, SphinxKnight
Last updated by: wbamberg,