Propriedade de perspectiva CSS
Exemplo
Dê a um elemento posicionado em 3D alguma perspectiva:
#div1
{
perspective: 100px;
}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A perspective
propriedade é usada para dar alguma perspectiva a um elemento posicionado em 3D.
A perspective
propriedade define a que distância o objeto está do usuário. Assim, um valor mais baixo resultará em um efeito 3D mais intenso do que um valor mais alto.
Ao definir a perspective
propriedade de um elemento, são os elementos CHILD que obtêm a vista em perspectiva, NÃO o próprio elemento.
Dica: Observe também a propriedade perspective-origin , que define em qual posição o usuário está olhando para o objeto 3D.
Para entender melhor a propriedade de perspectiva, veja uma demonstração .
Valor padrão: | Nenhum |
---|---|
Herdado: | não |
Animavel: | sim. Leia sobre animáveis |
Versão: | CSS3 |
Sintaxe JavaScript: | objeto .style.perspective="50px" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Números seguidos por -webkit- ou -moz- especificam a primeira versão que funcionou com um prefixo.
Property | |||||
---|---|---|---|---|---|
perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0.3 -webkit- |
23.0 15.0 -webkit- |
Sintaxe CSS
perspective: length|none;
Valores de propriedade
Property Value | Description |
---|---|
length | How far the element is placed from the view |
none | Default value. Same as 0. The perspective is not set |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Mais exemplos
Exemplo
Crie um cubo e defina diferentes perspectivas:
.ex1 {
perspective: 800px;
}
.ex2 {
perspective: 150px;
}
Páginas relacionadas
Tutorial CSS: Transformações CSS 3D
Referência HTML DOM: propriedade perspectiva