perspective()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

Try it

transform: perspective(0);

transform: perspective(none);

transform: perspective(800px);

transform: perspective(23rem);

transform: perspective(6.5cm);

<section>  <div>    <div>1</div>    <div>2</div>    <div>3</div>    <div>4</div>    <div>5</div>    <div>6</div>  </div></section>

#default-example {  background: linear-gradient(skyblue, khaki);  perspective: 800px;  perspective-origin: 150% 150%;}#example-element {  width: 100px;  height: 100px;  perspective: 550px;  transform-style: preserve-3d;}.face {  display: flex;  align-items: center;  justify-content: center;  width: 100%;  height: 100%;  position: absolute;  backface-visibility: inherit;  font-size: 60px;  color: white;}.front {  background: rgb(90 90 90 / 0.7);  transform: translateZ(50px);}.back {  background: rgb(0 210 0 / 0.7);  transform: rotateY(180deg) translateZ(50px);}.right {  background: rgb(210 0 0 / 0.7);  transform: rotateY(90deg) translateZ(50px);}.left {  background: rgb(0 0 210 / 0.7);  transform: rotateY(-90deg) translateZ(50px);}.top {  background: rgb(210 210 0 / 0.7);  transform: rotateX(90deg) translateZ(50px);}.bottom {  background: rgb(210 0 210 / 0.7);  transform: rotateX(-90deg) translateZ(50px);}

Theperspective() transform function is part of thetransform value applied on theelement being transformed. This differs from theperspective andperspective-originproperties which are attached to the parent of a child transformed in 3-dimensional space.

Syntax

css

perspective(d)

Values

d

Is a<length> representing the distance from the user to the z=0 plane. The z=0 plane is the plane where everything appears in a 2-dimensional view, or the screen. Values smaller than1px (including zero) are clamped to1px. Negative values are syntax errors.

Values other thannone 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 ofperspective() represent a large transformation;perspective(none) represents perspective from infinite distance and no transformation.

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.	$(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & - 1 / d & 1 \end{matrix}) \left( \begin{array}{cccc} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & -\frac{1}{d} & 1 \\ \end{array} \right)$

Formal syntax

<perspective()> =
perspective([<length [0,∞]>|none])

Examples

HTML

html

<p>Without perspective:</p><div>  <div>A</div>  <div>B</div>  <div>C</div></div><p>With perspective (9cm):</p><div>  <div>A</div>  <div>B</div>  <div>C</div></div><p>With perspective (4cm):</p><div>  <div>A</div>  <div>B</div>  <div>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);}