A propriedade CSS perspective-origin

Definição e uso

A propriedade perspective-origin define o eixo X e Y a partir do qual o elemento 3D é baseado. Esta propriedade permite que você altere a posição inferior do elemento 3D.

Quando a propriedade perspective-origin é definida para um elemento, seus elementos filhos obterão o efeito de perspectiva, não o elemento em si.

Nota:Esta propriedade deve ser usada juntamente com perspectiva A propriedade deve ser usada em conjunto com outras propriedades e afeta apenas os elementos de transformação 3D.

Veja também:

Tutorial do CSS3:Transformação 3D do CSS3

Manual do HTML DOM:Propriedade perspectiveOrigin

Exemplo

Defina a posição de base do elemento 3D:

div
{
perspective:150;
perspective-origin: 10% 10%;
}

Experimente você mesmo

Sintaxe do CSS

perspective-origin: eixo x eixo y;

Valor da propriedade

Valor Descrição
eixo x

Define a posição da visão no eixo x. Valor padrão: 50%.

Valores possíveis:

  • esquerda
  • centro
  • direita
  • length
  • %
eixo y

Define a posição da visão no eixo y. Valor padrão: 50%.

Valores possíveis:

  • superior
  • centro
  • inferior
  • length
  • %

Detalhes técnicos

Valor padrão: 50% 50%
Herança: não
Versão: CSS3
Sintaxe do JavaScript: objeto.style.perspectiveOrigin="10% 10%"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Chrome IE / Edge Firefox Safari Opera
36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0.3 -webkit-		 23.0
15.0 -webkit-