perspective()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 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. | ||
Exemplos
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
.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.