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.


```css
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.
  | 

(

1

0

0

0

0

1

0

0

0

0

1

0

0

0

−
1
/
d

1

)

 |

Examples
--------

### HTML


```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


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

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-perspective |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `transform`
* `<transform-function>`
* Individual transform properties:
    + `translate`
    + `scale`
    + `rotate`