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.

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 ℝ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. 10000100001000−1/d1

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> para informações de compatibilidade.

Ver também