A propriedade CSS transform

Definição e uso

O atributo transform aplica conversões 2D ou 3D aos elementos. Este atributo permite que rotacionemos, escaliemos, movamos ou inclinemos os elementos.

Para entender melhor o atributo transform, veja esteDemonstração.

Veja também:

Tutorial CSS3:Transformações 2D do CSS3

Tutorial CSS3:Transformações 3D do CSS3

Manual de referência HTML DOM:Atributo transform

Exemplo

Rotação do elemento div:

div
{
transform:rotate(7deg);
}

Experimente você mesmo

Mais exemplos na parte inferior da página.

Sintaxe CSS

transform: none|transform-functions;

Valor do atributo

Valor Descrição teste
nada Definição de não realizar conversão. teste
matrix(n,n,n,n,n,n) Definição da conversão 2D, usando uma matriz de seis valores. teste
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Definição da conversão 3D, usando uma matriz 4x4 de 16 valores.
translate(x,y) definir uma conversão 2D. teste
translate3d(x,y,z) definir uma conversão 3D.
translateX(x) definir uma conversão, usando apenas o valor do eixo X. teste
translateY(y) definir uma conversão, usando apenas o valor do eixo Y. teste
translateZ(z) definir uma conversão 3D, usando apenas o valor do eixo Z.
scale(x,y) definir uma conversão de escala 2D. teste
scale3d(x,y,z) definir uma conversão de escala 3D.
scaleX(x) definir uma conversão de escala ajustando o valor do eixo X. teste
scaleY(y) definir uma conversão de escala ajustando o valor do eixo Y. teste
scaleZ(z) definir uma conversão de escala 3D ajustando o valor do eixo Z.
rotate(ângulo) definir uma rotação 2D, especificando o ângulo nos parâmetros. teste
rotate3d(x,y,z,ângulo) definir uma rotação 3D.
rotateX(ângulo) definir uma rotação 3D ao longo do eixo X. teste
rotateY(ângulo) definir uma rotação 3D ao longo do eixo Y. teste
rotateZ(ângulo) definir uma rotação 3D ao longo do eixo Z. teste
skew(ângulo-x,ângulo-y) definir uma conversão de inclinação 2D ao longo dos eixos X e Y. teste
skewX(ângulo) definir uma conversão de inclinação 2D ao longo do eixo X. teste
skewY(ângulo) definir uma conversão de inclinação 2D ao longo do eixo Y. teste
perspective(n) definir uma visão de perspectiva para elementos de transformação 3D. teste

detalhes técnicos

valor padrão: nada
herança: não
versão: CSS3
Sintaxe JavaScript: object.style.transform="rotate(7deg)"

mais exemplos

a imagem jogada na mesa
Este exemplo demonstra como criar uma imagem 'Polaroid' e girar a imagem.

suporte do navegador

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

números com -webkit-、-moz- ou -ms- indicam a primeira versão com prefixo usada.

propriedade Chrome IE / Edge Firefox Safari Opera
transform (2D) 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-		 12.0 10.0 9.0
4.0 -webkit-		 23.0
15.0 -webkit-