Propriedade Perspective Origin
Última atualização: 2026-09-13
perspective-origin Propriedade Perspective Origin
A propriedade perspective-origin define a posição do observador para a perspectiva 3D — onde o ponto de fuga se projeta no elemento. O padrão é o centro do elemento (50% 50%). Ajustá-la muda o ângulo a partir do qual a cena 3D é vista — de cima, de lado e assim por diante — e funciona em conjunto com perspective.
| Categoria | |
|---|---|
| Valor Inicial | 50% 50% |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
perspective-origin: [<length-percentage> | left | center | right] [<length-percentage> | top | center | bottom];⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<length> | <percentage> | Tipo | As coordenadas da origem da perspectiva |
left | center | right | top | bottom | Palavra-chave | Uma posição predefinida |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| perspective-origin | ✓ v36 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v23 |
| Suportado em todos os principais navegadores | |||||
Dica： As porcentagens são relativas ao elemento no qual a perspectiva é aplicada; as palavras-chave left/right/top/bottom são mais intuitivas.
Dica： Alterar perspective-origin não tem efeito em transformações 2D — a diferença só aparece em transformações 3D como rotateX/Y e translateZ.
❓ Perguntas Frequentes
QQual é a diferença entre perspective-origin e transform-origin?
AA perspective-origin é definida no pai que carrega a perspectiva e define onde o ponto de fuga do observador se projeta na cena, afetando a direção compartilhada da perspectiva de todos os filhos 3D. A transform-origin é definida em um único elemento e define o ponto de referência para as transformações desse elemento. A primeira controla de onde se olha; a segunda controla em torno do que o elemento rotaciona ou escala.
QComo faço um elemento parecer que é visto de baixo em 3D?
AColoque o ponto de vista abaixo do elemento: perspective-origin: 50% 100% posiciona o ponto de fuga no centro inferior do contêiner, então o observador olha para cima e o elemento aparece em uma visão de ângulo baixo. Da mesma forma, 0% 50% olha da esquerda, 100% 50% da direita e 50% 0% de cima. Combine isso com o ângulo de rotação para obter o ponto de vista exato desejado.
QA que se referem os valores de porcentagem do perspective-origin no CSS?
AElas são relativas às dimensões do elemento pai que possui a perspectiva. 0% 0% é o canto superior esquerdo, 100% 100% é o inferior direito, e o padrão 50% 50% é o centro. Além de porcentagens, você pode usar as palavras-chave left, center, right, top e bottom ou valores de comprimento. Não afeta transformações 2D — a diferença só aparece em 3D.
QPor que não consigo ver nenhuma mudança depois de modificar o perspective-origin?
AO perspective-origin afeta apenas transformações 3D que possuem perspectiva. Se os filhos não têm transformações 3D como rotateX/Y ou translateZ, ou o pai não tem perspectiva nenhuma, mover o ponto de fuga não produz nenhuma diferença visual. Além disso, quando a distância da perspectiva é muito grande, as diferenças entre os pontos de vista se tornam insignificantes.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
