Propriedade CSS perspective
Use a propriedade CSS perspective para dar perspectiva a um elemento 3D. Veja valores e exemplos da propriedade.
A propriedade perspective define a distância do observador ao plano z = 0 dos filhos 3D de um elemento. Em termos simples, ela controla a intensidade do efeito 3D: transforma uma rotação plana em algo que parece recuar para dentro da tela, da mesma forma que os objetos diminuem à medida que se afastam dos seus olhos na vida real.
Você a define em um elemento pai. O valor representa a distância simulada do observador até a tela. Valores menores (como 100px) posicionam o observador muito perto, tornando a perspectiva dramática e exagerada. Valores maiores (como 1000px) posicionam o observador mais longe, tornando o efeito sutil e quase plano. Esta página explica como a propriedade se comporta e mostra a diferença entre none e um comprimento real.
Como o elemento filho está no espaço 3D, as partes com z > 0 estão mais próximas do observador e parecem maiores, enquanto as partes com z < 0 estão mais afastadas e parecem menores.
Quando devo usar isso?
Você recorre a perspective sempre que rotacionar um elemento em 3D (usando transform: rotateX(), rotateY() ou translateZ()) e quiser que essa rotação pareça uma profundidade real em vez de um cisalhamento plano. Casos comuns incluem cartões com efeito flip, cubos e carrosséis 3D, e efeitos de inclinação ao passar o mouse.
A propriedade perspective aceita um único valor <length>. Zero é válido (desativa o efeito, como none), e valores negativos não são permitidos — eles são tratados como inválidos e ignorados.
Para controlar onde fica o ponto de fuga (a posição para onde o observador está olhando), combine esta propriedade com perspective-origin. Para as rotações 3D em si, veja a propriedade transform, e para manter os filhos aninhados no mesmo espaço 3D, use transform-style.
A propriedade perspective é uma das propriedades CSS3.
Propriedade perspective vs. a função de transformação perspective(). A propriedade perspective não afeta o elemento em que está definida — ela apenas aplica uma visualização em perspectiva aos filhos transformados em 3D desse elemento. O valor perspective() usado dentro da propriedade transform aplica profundidade diretamente ao próprio elemento. Use a propriedade quando tiver vários filhos compartilhando uma mesma posição de observador; use a função quando um único elemento precisar de sua própria profundidade.
Os navegadores modernos suportam esta propriedade completamente sem prefixos de fornecedor.
| Valor inicial | none |
|---|---|
| Aplica-se a | Elementos transformáveis. |
| Herdada | Não. |
| Animável | Sim. A transformação da perspectiva é animável. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.perspective = "70px"; |
Sintaxe
Sintaxe CSS da propriedade perspective
perspective: length | none | initial | inherit;Exemplo sem perspectiva (perspective: none)
Com perspective: none no pai, o rotateX(40deg) do filho é renderizado como um cisalhamento 2D plano — não há nenhuma sensação de profundidade. Este é o ponto de referência para comparação.
Exemplo de código CSS com perspective
<!DOCTYPE html>
<html>
<head>
<title>Title of the element</title>
<style>
.element1 {
padding: 50px;
position: absolute;
border: 1px solid #666;
background-color: #1c87c9;
background: #8ebf42;
-webkit-transform-style: preserve-3d;/* Safari 3-8 */
-webkit-transform: rotateX(40deg);/* Safari 3-8 */
transform-style: preserve-3d;
transform: rotateX(40deg);
}
.element2 {
position: relative;
height: 160px;
width: 160px;
margin-left: 20px;
border: 1px solid #000;
-webkit-perspective: none;/* Safari 4-8 */
perspective: none;
}
</style>
</head>
<body>
<h2>Perspective property example</h2>
<h3>perspective: none:</h3>
<div class="element2">
Box2
<div class="element1">Box1</div>
</div>
</body>
</html>Resultado
Exemplo com perspective: 100px
Agora o pai recebe uma perspective de 100px. Como o observador está simulado como muito próximo, o mesmo rotateX(40deg) no filho é lido como profundidade real — a borda superior recua para dentro da tela e a caixa parece inclinada no espaço 3D. Tente aumentar o valor para 500px ou 1000px e a inclinação ficará mais suave.
Exemplo CSS de perspective com px
<!DOCTYPE html>
<html>
<head>
<title>Title of the element</title>
<style>
.element1 {
padding: 50px;
position: absolute;
border: 1px solid #666;
background-color: #1c87c9;
background: #8ebf42;
-webkit-transform-style: preserve-3d;/* Safari 3-8 */
-webkit-transform: rotateX(40deg);/* Safari 3-8 */
transform-style: preserve-3d;
transform: rotateX(40deg);
}
.element2 {
position: relative;
height: 150px;
width: 150px;
margin-left: 50px;
border: 1px solid #000;
-webkit-perspective: 100px;/* Safari 4-8 */
perspective: 100px;
}
</style>
</head>
<body>
<h2>Perspective property example</h2>
<h3>perspective: 100px:</h3>
<div class="element2">
Box2
<div class="element1">Box1</div>
</div>
</body>
</html>Valores
| Valor | Descrição |
|---|---|
| length | Aplica uma transformação de perspectiva ao elemento e ao seu conteúdo. |
| none | Não aplica nenhuma transformação de perspectiva. |
| initial | Faz a propriedade usar seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |
Armadilhas comuns
- Defina no pai, não no elemento rotacionado. Um erro comum é colocar
perspectiveno mesmo elemento que você rotaciona — isso não tem efeito algum. Mova para o pai ou use a funçãoperspective()dentro detransformno próprio elemento. - A ordem importa com a função
perspective(). Quando usar a função, escreva-a primeiro:transform: perspective(500px) rotateX(40deg). Listada após a rotação, ela se aplica a um sistema de coordenadas já rotacionado e o resultado muda. - 3D aninhado precisa de
transform-style: preserve-3d. Sem isso (o padrão éflat), os netos são achatados no plano do pai e a profundidade é perdida.
Propriedades relacionadas
- perspective-origin — define a posição do ponto de fuga.
- transform — aplica as rotações e translações 3D às quais
perspectivedá profundidade. - transform-style — mantém os elementos aninhados no espaço 3D compartilhado.
- backface-visibility — oculta o verso de um elemento quando ele é rotacionado para longe do observador.