Exemplo
Definir colocação base de um elemento 3D:
div
{
-webkit-perspective: 150px; /* Chrome, Safari, Opera */
-webkit-perspective-origin: 10% 10%; /* Chrome, Safari, Opera */
perspective: 150px;
perspective-origin: 10% 10%;
}
Tente você mesmo " Definição e Uso
A propriedade perspective-origin define onde um elemento 3D é baseado no X e do eixo y. Esta propriedade permite que você mude a posição inferior de elementos 3D.
Ao definir a propriedade perspectiva de origem para um elemento, são os elementos filhos que estão posicionados, e não o próprio elemento.
Note: Esta propriedade deve ser usado em conjunto com a perspectiva de propriedade, e só afeta 3D transformado elementos!
Para entender melhor a propriedade perspective-origin, ver uma demonstração .
| Valor padrão: | 50% 50% |
|---|---|
| Herdado: | no |
| Animatable: | yes. Read about animatable Try it |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.perspectiveOrigin="10px 50%" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit- ou -moz- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| perspective-origin | 36,0 12,0 -webkit- | 10.0 | 16,0 10,0 -moz- | 9 4.0.3 -webkit- | 23,0 15,0 -webkit- |
CSS Syntax
perspective-origin:x-axis y-axis|initial|inherit;Valores de propriedade
| Valor da propriedade | Descrição |
|---|---|
| x-axis | Definir onde o ponto de vista é colocado no eixo-x Valores possíveis:
Valor padrão: 50% |
| y-axis | Definir onde o ponto de vista é colocado no eixo y Valores possíveis:
Valor padrão: 50% |
| inicial | Define essa propriedade para o valor padrão. Leia sobre inicial |
| herdar | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
Páginas relacionadas
Tutorial CSS: transformações CSS 3D
HTML DOM de referência: perspectiveOrigin property