# perspective()

Nuestros voluntarios aún no han traducido este artículo al Español. ¡Únete a nosotros y ayúdanos a traducirlo!
También puedes leer el artículo en English (US).

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.