perspective()

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> (en-US).

Sintaxe

A distância de perspectiva usada porperspective() é especificada por um valor <length> (en-US), 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> (en-US) 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 ℝ2 Coordenadas homogêneas em ℝℙ2 Coordenadas cartesianas em ℝ3 Coordenadas homogêneas em ℝℙ3

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 ℝ3, e não pode ser representada usando uma matriz de coordenadas cartesianas. 1 0 0 0 0 1 0 0 0 0 1 0 0 0 −1 /d 1

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

Resultado

Compatibilidade com navegadores

Veja o tipo de dado <transform-function> (en-US) para informações de compatibilidade.

Ver também