Propriedade Style transform

Definição e uso

transform A propriedade aplica transformações 2D ou 3D ao elemento. Esta propriedade permite que você rote, ajuste o tamanho, mova, incline e mais.

Veja também:

Manual de referência CSS:A propriedade transform

Exemplo

Rotacionar elemento div:

document.getElementById("myDIV").style.transform = "rotate(7deg)";

Experimente pessoalmente

Sintaxe

Retorne a propriedade transform:

object.style.transform

Defina a propriedade transform:

object.style.transform = "none|transform-functions|initial|inherit"

Valor da propriedade

Valor Descrição
none Define que não deve haver nenhuma transformação.
matrix(n, n, n, n, n, n) Usa uma matriz de seis valores para definir a transformação bidimensional.
matrix3d(n, n, n, n, etc...) Usa uma matriz 4x4 de 16 valores para definir a transformação 3D.
translate(x, y) Define a translação 2D.
translate3d(x, y, z) Define a translação 3D.
translateX(x) Define a translação, usando apenas o valor do eixo X.
translateY(y) Define a translação, usando apenas o valor do eixo Y.
translateZ(z) Define a translação 3D, usando apenas o valor do eixo Z.
scale(x, y) Define a transformação de escala 2D.
scale3d(x, y, z) Define a transformação de escala 3D.
scaleX(x) Define a transformação de escala, fornecendo um valor para o eixo X.
scaleY(y) Define a transformação de escala, fornecendo um valor para o eixo Y.
scaleZ(z) Define a transformação de escala 3D, fornecendo um valor para o eixo Z.
rotate(angle) Define a rotação 2D, especificando o ângulo nos parâmetros.
rotate3d(x, y, z, angle) Define a rotação 3D.
rotateX(angle) Define a rotação 3D ao longo do eixo X.
rotateY(angle) Define a rotação 3D ao longo do eixo Y.
rotateZ(angle) Define a rotação 3D ao longo do eixo Z.
skew(x-angle, y-angle) Define a transformação de inclinação 2D ao longo dos eixos X e Y.
skewX(angle) Define a transformação de inclinação 2D ao longo do eixo X.
skewY(angle) Define a transformação de inclinação 2D ao longo do eixo Y.
perspective(n) Define a perspetiva do elemento de transformação 3D.
initial Defina essa propriedade para seu valor padrão. Veja também initial.
inherit Herda essa propriedade do elemento pai. Veja também inherit.

Detalhes técnicos

Valor padrão: Nenhum
Retorno: uma string que representa a A propriedade transform.
Versão do CSS: CSS3

Suporte do navegador

Os números na tabela indicam a versão do navegador que suporta completamente essa propriedade.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0