manual de referência CSS

CSS @regras (RULES)

大全 de atributos CSS

Atributo position do CSS CSS3 Atributo perspective

CSS3 perspective-Método de uso e exemplo da propriedade origin

perspective-Definição da propriedade origin 3O eixo X e Y baseados no elemento D. Esta propriedade permite que você altere 3A posição inferior do elemento D. Define o perspective no momento da definição-A propriedade origin, que é um filho do elemento, perspective, não o elemento em si.

A tabela a seguir fornece uma descrição de uso e histórico de versão deste atributo, bem como a sintaxe de uso no script JavaScript.

Valor padrão:	50P%
Aplicável a:	Elementos deformáveis
Herança:	não
Animável:	é.Consulte Propriedades de animação。
Versão:	CSS3nova funcionalidade
Sintaxe do JavaScript:	object.style.perspectiveOrigin="20%"

Perspective-Uso da sintaxe origin

A sintaxe deste atributo é a seguinte:

perspective-origin:　[　x-position　y-position　]　|　initial　|　inherit

Atenção:Se for apenas perspective-A propriedade origin especifica um valor, então o segundo valor é假定为中心，等于50% dos valores.

Este exemplo demonstra como usar perspective-propriedade origin.

Exemplo

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　perspective-origin:　20%　top;
　　　　border:　4px　solid　#a2b058;
　　　　background:　#f0f5d8;
}
.transformed　{
　　　　-webkit-transform:　rotate3d(0,　1,　0,　60deg);　/*　Chrome,　Safari,　Opera　*/
　　　　transform:　rotate3d(0,　1,　0,　60deg);　
}

Teste e veja‹/›

Atenção:Se pelo menos um dos dois valores não for um nome-chave, o primeiro valor representa a posição horizontal (ou deslocamento) do ponto de origem da visão tridimensional, e o segundo valor representa a posição vertical (ou deslocamento).

Valor da propriedade

A tabela a seguir descreve os valores dessa propriedade.

Valor	Descrição
x-axis	Representa a posição horizontal (ou deslocamento) do ponto de origem da visão tridimensional. Ele pode ter um dos seguintes valores: percentage -Define o deslocamento em relação à largura do elemento. length -Define o deslocamento do valor de comprimento usado. left -igual a 0% ou zero de largura. center -igual à largura da caixa50% ou metade. right -igual a100% ou a largura inteira da caixa.
y-axis	Representa a posição vertical (ou deslocamento) do ponto de origem da visão tridimensional. Ele pode ter um dos seguintes valores: percentage -Define o deslocamento em relação à altura do elemento. length -Define o deslocamento do valor de comprimento usado. top -igual a 0% ou zero de altura. center -igual à altura da caixa50% ou metade. bottom -igual a100% ou a altura inteira da caixa.
initial	Defina essa propriedade para seu valor padrão.
inherit	Se especificado, o elemento relacionado adota o perspective do elemento pai-Valores do atributo origin.

Compatibilidade do navegador

perspective-Compatibilidade do navegador do atributo origin, os números na tabela a seguir representam a versão mínima do navegador que suporta essa propriedade; todos os navegadores principais suportam essa propriedade.

	Firefox 10+ ^-moz-，16 + Google Chrome 12+ ^-webkit-，36+ Internet Explorer 10+ Apple Safari 4.0.3+ ^-webkit- Opera 15+ ^-webkit-，23+