perspective()

Baseline Widely available

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

A função CSS perspective() define uma transformação que configura a distância entre o usuário e o plano z=0. Seu resultado é um dado do tipo <transform-function>.

Sintaxe

A distância de perspectiva usada porperspective() é especificada por um valor <length>, que representa a distância entre o usuário e o plano z=0. Um valor positivo faz o elemento parecer mais perto do usuário, e um valor negativo o faz parecer mais longe.

perspective(d)

Valores

d: É um <length> representando a distância do usuário até o plano z=0. Se for 0 ou um valor negativo, nenhuma transformação de perspectiva é aplicada.

Coordenadas cartesianas em ℝ²	Coordenadas homogêneas em ℝℙ²	Coordenadas cartesianas em ℝ³	Coordenadas homogêneas em ℝℙ³
Essa transformação se aplica ao espaço 3D e não pode ser representada no plano.		Essa não é uma transformação linear em ℝ³, e não pode ser representada usando uma matriz de coordenadas cartesianas.	$(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & - 1 / d & 1 \end{matrix})$

Exemplos

HTML

html

<p>Sem perspectiva:</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>Com perspectiva (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

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