Propriedade CSS perspective-origin
Use a propriedade CSS perspective-origin para definir a perspectiva em que o elemento é exibido ao utilizador. Veja valores e exemplos.
A propriedade CSS perspective-origin define a posição a partir da qual o observador parece estar a ver um elemento transformado em 3D. Em outras palavras, ela move o ponto de fuga — o ponto para o qual as faces inclinadas em relação ao ecrã parecem convergir. É uma das propriedades CSS3.
Como funciona
Uma cena 3D precisa de dois ingredientes para parecer correta:
- A propriedade
perspective, que define quão forte é o efeito 3D (quanto menor o valor, mais dramático é o escorçamento). - A propriedade
perspective-origin, que define onde fica a câmara.perspectivedecide a profundidade do ponto de fuga;perspective-origindecide a sua posição horizontal e vertical.
Por padrão, o ponto de fuga fica no centro exato do elemento (50% 50%), de modo que uma face filho rotacionada parece simétrica. Deslocar perspective-origin para um lado é como caminhar em torno do objeto — o mesmo elemento filho parece ser visto da esquerda, da direita, de cima ou de baixo.
perspective-origin só tem efeito quando perspective também está definida, seja no mesmo elemento ou num ancestral. Sem ela, a propriedade é analisada mas não faz nada.
A sintaxe de dois valores sempre lê horizontal primeiro, vertical em segundo (por exemplo, perspective-origin: 25% 75%). Quando se fornece um único valor, o valor em falta tem como padrão center. Pares de palavras-chave como top left são a exceção — as palavras-chave podem ser escritas em qualquer ordem porque cada uma nomeia um eixo específico.
perspective-origin é aplicado ao elemento pai, mas governa como os seus elementos filhos são projetados — o elemento ao qual é aplicado não é ele próprio transformado.
| Valor Inicial | 50% 50% |
|---|---|
| Aplica-se a | Elementos transformáveis. |
| Herdado | Não. |
| Animável | Sim. A transformação da perspetiva é animável. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.perspectiveOrigin = "20px 70%"; |
Sintaxe
Sintaxe CSS de perspective-origin
perspective-origin: x-position y-position | x | y | closest-side | farthest-side | initial | inherit;Exemplo da propriedade perspective-origin:
Exemplo de código CSS perspective-origin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element1 {
position: relative;
height: 150px;
width: 150px;
margin-left: 60px;
border: 1px solid #666;
perspective: 130px;
perspective-origin: 50% 50%;
}
.element2 {
padding: 50px;
position: absolute;
border: 1px solid #000;
background: #8ebf42;
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Perspective-origin property example</h2>
<h3>Perspective-origin: 50% 50%:</h3>
<div class="element1">
Box1
<div class="element2">Box2</div>
</div>
</body>
</html>Resultado
Com o valor padrão 50% 50%, o ponto de fuga está centrado, pelo que o Box2 rotacionado parece uniformemente escorçado. Nos exemplos seguintes, movemos esse ponto para uma borda e observamos a mudança no ângulo de visão aparente.
Exemplo da propriedade perspective-origin com o valor "left":
Exemplo CSS perspective-origin com valor left
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element1 {
position: relative;
height: 150px;
width: 150px;
margin-left: 20px;
border: 1px solid #666;
perspective: 80px;
perspective-origin: left;
}
.element2 {
padding: 50px;
position: absolute;
border: 1px solid #000;
background: #8ebf42;
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Perspective-origin property example</h2>
<h3>Perspective-origin: left:</h3>
<div class="element1">
Box1
<div class="element2">Box2</div>
</div>
</body>
</html>Exemplo da propriedade perspective-origin com o valor "right":
Exemplo CSS perspective-origin com valor right
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element1 {
position: relative;
height: 150px;
width: 150px;
margin-left: 160px;
border: 1px solid #666;
perspective: 80px;
perspective-origin: right;
}
.element2 {
padding: 50px;
position: absolute;
border: 1px solid #000;
background: #8ebf42;
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Perspective-origin property example</h2>
<h3>Perspective-origin: right:</h3>
<div class="element1">
Box1
<div class="element2">Box2</div>
</div>
</body>
</html>Exemplo da propriedade perspective-origin definida como "bottom right":
Exemplo CSS perspective-origin com valor bottom
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element1 {
position: relative;
height: 150px;
width: 150px;
margin-left: 60px;
border: 1px solid #666;
perspective: 130px;
perspective-origin: bottom right;
}
.element2 {
padding: 50px;
position: absolute;
border: 1px solid #000;
background: #8ebf42;
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Perspective-origin property example</h2>
<h3>Perspective-origin: bottom right:</h3>
<div class="element1">
Box1
<div class="element2">Box2</div>
</div>
</body>
</html>Valores
| Valor | Descrição |
|---|---|
| x-position | A posição horizontal do ponto de fuga. Aceita um <length>, uma percentagem ou uma das palavras-chave left (= 0), center (= 50%) ou right (= 100%). |
| y-position | A posição vertical do ponto de fuga. Aceita um <length>, uma percentagem ou uma das palavras-chave top (= 0), center (= 50%) ou bottom (= 100%). |
| initial | Define esta propriedade com o seu valor padrão (50% 50%). |
| inherit | Herda esta propriedade do seu elemento pai. |
Os valores de percentagem e comprimento são resolvidos em relação à própria caixa do elemento, com a origem no canto superior esquerdo. Assim, 0 0 coloca o ponto de fuga no canto superior esquerdo, 100% 100% no canto inferior direito, e valores negativos ou superiores a 100% são permitidos para mover a câmara para fora da caixa.
Suporte nos navegadores
perspective-origin é suportado em todos os navegadores modernos. Não há mais necessidade de prefixos de fornecedor como -webkit-perspective-origin para as versões atuais do Chrome, Edge, Firefox e Safari.
Propriedades relacionadas
perspective— define a distância ao ponto de fuga e é obrigatória para queperspective-origintenha algum efeito.transform— aplica as transformaçõesrotateX,rotateYetranslateZàs quais a perspetiva é aplicada.transform-style— usepreserve-3dpara que os filhos aninhados mantenham as suas posições 3D dentro da perspetiva.backface-visibility— controla se o lado reverso de um elemento rotacionado é exibido.