Propriedade Perspective
Última atualização: 2026-09-13
perspective Propriedade Perspective
A propriedade perspective define a intensidade da perspectiva em transformações 3D — a distância do olho do observador até o plano z=0. Valores menores produzem um efeito mais forte (diferença mais exagerada entre próximo-grande e distante-pequeno), enquanto valores maiores achatam a perspectiva. A propriedade deve ser definida no pai do elemento que aplica a transformação 3D e é a base de cenas 3D realistas.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
perspective: none | <length>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | Palavra-chave | Sem perspectiva |
<length> | Tipo | A distância da perspectiva |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| perspective | ✓ v36 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v23 |
| Suportado em todos os principais navegadores | |||||
Dica： A perspective deve ser definida no elemento pai e afeta todos os seus filhos que aplicam transformações 3D. Valores entre 500px e 1500px geralmente parecem naturais.
Importante： none significa sem perspectiva (equivalente a distância infinita), então as transformações 3D são renderizadas como uma projeção ortográfica, sem sensação de profundidade.
❓ Perguntas Frequentes
QComo as propriedades perspective e perspective-origin se relacionam?
AA perspective define a distância do observador até o plano z=0 e, portanto, a intensidade da perspectiva (o quão exagerada é a diferença entre próximo-grande e distante-pequeno). A perspective-origin define onde a linha de visão do observador cai no contêiner, decidindo de qual ângulo a cena é vista. Ambas são parâmetros necessários para a visualização 3D, são definidas no mesmo contêiner pai e juntas determinam como as transformações 3D dos filhos aparecem.
QPor que não há sensação de profundidade mesmo eu tendo definido rotateY em um elemento?
ANormalmente o pai está sem uma perspective, então a rotação é renderizada plana. Ou o pai tem overflow: hidden, uma opacidade abaixo de 1 ou um filtro, cada um dos quais força um contexto plano e esmaga o 3D. Alternativamente, aplique a perspectiva diretamente no elemento com transform: perspective(800px) rotateY(45deg).
QQual é um bom valor de perspective para usar em transformações 3D do CSS?
AO valor é a distância do observador até o elemento: valores menores dão uma perspectiva mais forte e distorção mais exagerada, enquanto valores maiores se aproximam de uma projeção ortográfica. Para efeitos comuns de página, de 500px a 1500px parece natural, sendo 800px a 1000px uma escolha frequente; de 200px a 400px produz um visual exagerado de olho de peixe (fisheye). Ajuste-o proporcionalmente ao tamanho do elemento para que as bordas não se movam demais durante a rotação.
QQual é a diferença entre a propriedade perspective e a função transform: perspective()?
AA propriedade perspective é definida no pai e dá a todos os filhos 3D o mesmo ponto de vista único, então vários filhos compartilham uma perspectiva. A função perspective() é escrita no próprio transform de um elemento específico, aplica-se apenas a esse elemento e seu efeito depende da posição na lista de funções. A propriedade no pai se aproxima mais de cenas reais; a forma de função convém para dar a um elemento sua própria perspectiva.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
