Exemplo
Defina o ponto de vista de onde um elemento é visto:
div
{
-webkit-perspective: 500px; /* Chrome, Safari, Opera */
perspective: 500px;
}
Tente você mesmo " Definição e Uso
A propriedade perspectiva define quantos pixels um elemento 3D é colocado a partir da vista. Esta propriedade permite-lhe mudar a perspectiva sobre a forma como elementos 3D são vistos.
Ao definir a propriedade perspectiva de um elemento, são os elementos filho que recebem a vista em perspectiva, não o próprio elemento.
Note: A propriedade perspectiva afeta apenas os elementos transformados em 3D!
Tip: Use essa propriedade em conjunto com a perspectiva de origem propriedade, que permite alterar a posição inferior de elementos 3D.
Para entender melhor a propriedade perspectiva, ver uma demonstração .
| Valor padrão: | none |
|---|---|
| Herdado: | no |
| Animatable: | yes. Read about animatable Try it |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.perspective="50px" 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 | 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:length|none;Valores de propriedade
| Valor da propriedade | Descrição |
|---|---|
| length | Até onde o elemento é colocado a partir da vista |
| Nenhum | Valor padrão. Mesmo como 0. A perspectiva não está definido |
| 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
Referência HTML DOM: perspective property