manual de referência CSS

regras CSS @

大全 de propriedades CSS

CSS3 transform-Atributo origin Atributo top do CSS

CSS3 método de uso e exemplo do transform

a propriedade transform CSS é aplicada ao2D ou3D conversão. Esta propriedade permite que você rote, escalone, mova, incline, translade, rote, escalone e mais em espaço bidimensional ou tridimensional.

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

valor padrão:	none
aplicável a:	elementos deformáveis
herança:	não
animável:	é.por favor consulte propriedade de animação。
versão:	CSS3nova funcionalidade
sintaxe JavaScript:	objeto.style.transform="rodação(7deg)

sintaxe de uso do transform

A sintaxe deste atributo é a seguinte:

transform:　[　transform-function　]　1　ou mais valores　|　none　|　initial　|　inherit

O exemplo a seguir demonstra como usar a propriedade transform.

exemplo

img　{
　　　　-webkit-transform:　translate(200px,　50px);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform:　translate(200px,　50px);　　/*　Firefox　*/
　　　　　　　　-ms-transform:　translate(200px,　50px);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　translate(200px,　50px);　　　　　　
}

teste veja‹/›

valor do atributo

A tabela a seguir descreve os valores deste atributo.

valor	descrição
translate(tx,ty)	move o elemento ao longo dos eixos X e Y pela quantidade especificada.
translate3d(tx,ty,tz)	move o elemento ao longo dos eixos X, Y e Z pela quantidade especificada.
translateX(tx)	move o elemento ao longo do eixo X pela quantidade especificada.
translateY(ty)	move o elemento ao longo do eixo Y pela quantidade especificada.
translateZ(tz)	move o elemento ao longo do eixo Z pela quantidade especificada.
rodação(a)	de acordo com transform-A propriedade origin define a rotação do elemento em torno do seu ponto de origem em um ângulo especificado.
rodação3d(x,y,z, a)	Rotacionar em torno da direção vetorial [x, y, z], conforme especificado pelo último parâmetro, pelo ângulo especificado.3Elemento no espaço D.
rotateX(a)	Rotacionar o elemento em torno do eixo X pelo ângulo especificado.
rotateY(a)	Rotacionar o elemento em torno do eixo Y pelo ângulo especificado.
rotateZ(a)	Rotacionar o elemento em torno do eixo Z pelo ângulo especificado.
scale(sx,sy)	Escalar a largura e a altura do elemento para cima ou para baixo pela quantidade especificada. A função scale(1,1)inválido.
scale3d(sx,sy,sz)	Escalar o elemento ao longo dos eixos X, Y e Z pela quantidade especificada. A função scale3d(1,1,1)inválido.
scaleX(sx)	Escalar o elemento ao longo do eixo X.
scaleY(sy)	Escalar o elemento ao longo do eixo Y.
scaleZ(sz)	Escalar o elemento ao longo do eixo Z.
skew(ax,ay)	Inclinar o elemento ao longo dos eixos X e Y pelo ângulo especificado.
skewX(ax)	Inclinar o elemento ao longo do eixo X pelo ângulo especificado.
skewY(ay)	Inclinar o elemento ao longo do eixo Y pelo ângulo especificado.
matrix(n,n,n,n,n,n)	Especificar na forma de matriz de transformação contendo seis valores2Transformação D.
matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	em16de valores4×4Especificar na forma de matriz de transformação3Transformação D.
perspective(length)	Definição3Perspectiva do elemento de transformação D. Normalmente, à medida que o valor dessa função aumenta, o elemento aparece em um lugar mais distante do observador.
none	Especifique que nenhuma transformação deve ser aplicada.
initial	Defina esse atributo como seu valor padrão.
inherit	Se especificado, o elemento relacionado adota o valor do atributo transform do elemento pai.

Compatibilidade do navegador

Compatibilidade do atributo transform do navegador, 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+