manual de referência CSS

regras CSS (RULES)

大全 de Atributos CSS

CSS3 transform-style atributo CSS3 transform atributo

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

transform-A propriedade 'origin' permite que você altere a posição do elemento de conversão.

2O elemento de conversão D pode alterar os eixos X e Y do elemento. 3O elemento de conversão D pode alterar o eixo Z do elemento.　

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

Valor padrão:	50% 50% 0
Aplicável a:	Elementos transformáveis
Herança:	não
Animável:	é.Por favor, consulte Propriedades de animação。
Versão:	CSS3nova funcionalidade
JavaScript sintaxe:	object.style.transformOrigin="20@%"

transform-Sintaxe de uso do origin

A sintaxe dessa propriedade é a seguinte:

transform-origin: x-position | y-position | z-position | initial | inherit

Nota:se for apenas 'transform'-A propriedade 'origin' especifica um valor, assumindo que o segundo valor seja 'center', ele é igual a50% valor.

Os exemplos a seguir demonstram como usar transform-propriedade origin.

Exemplo

img　{
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-transform:　rotate(30deg);
　　　　-webkit-transform-origin:　25%　bottom;
　　　　/*　Firefox　*/
　　　　-moz-transform:　rotate(30deg);
　　　　-moz-transform-origin:　25%　bottom;
　　　　/*　IE　9　*/
　　　　-ms-transform:　rotate(30deg);
　　　　-ms-transform-origin:　25%　bottom;
　　　　
　　　　transform:　rotate(30deg);
　　　　transform-origin:　25%　bottom;
}

Teste para ver‹/›

Nota: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 transformação, e o segundo valor representa a posição vertical (ou deslocamento) do ponto de origem da transformação.

Valores do atributo

A tabela a seguir descreve os valores deste atributo.

valor	descrição
x-position	Representa a posição horizontal (ou deslocamento) do ponto de origem da transformação. 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 total da caixa.
y-position	Representa a posição vertical (ou deslocamento) do ponto de origem da transformação. 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 total da caixa.
z-position	umlengthValores, que descrevem a distância do ponto Z = 0 do origem (para3Transformação D）。Valores de porcentagem não são válidos.
initial	Defina esse atributo como seu valor padrão.
inherit	Se especificado, o elemento relacionado usa o transform do elemento pai-Valores do atributo origin.

Compatibilidade do navegador

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

	Firefox （2D）3.5 +，（3D）10+ ^-moz-，16 + Chrome （2D）4 +，（3D）12+ ^-webkit-，36 + Internet Explorer （2D）9 ^-ms-，10+ Apple Safari （2D）3.2 +，（3D）4+ ^-webkit- Opera （2D）10.5+ -o 　 ^-，（2D）（3D）15+ 　 ^-webkit-，23+