Transformações 2D CSS

Transformações 2D CSS

Transformações CSS (transforms) permitem que você mova, gire, escalone e incline elementos.

Coloque o mouse sobre o elemento abaixo para ver as transformações 2D:

2D rotate

Neste capítulo, você aprenderá as seguintes propriedades CSS:

  • transform

Suporte do navegador

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

Atributo Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

Métodos de transformação 2D do CSS

Usando CSS transform Atributo, você pode usar os seguintes métodos de transformação 2D:

  • translate()
  • rotate()
  • scaleX()
  • scaleY()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()

Dica:Você aprenderá transformações 3D no próximo capítulo.

Método translate()

Traduzir

translate() Método move o elemento a partir da sua posição atual (de acordo com os parâmetros especificados para o eixo X e Y).

O seguinte exemplo move o elemento <div> 50 pixels para a direita e 100 pixels para baixo a partir da sua posição atual:

Exemplo

div {
  transform: translate(50px, 100px);
}

Experimente você mesmo

Método rotate()

Girar

rotate() Método roda o elemento no sentido horário ou anti-horário de acordo com o ângulo fornecido.

O seguinte exemplo roda o elemento <div> em 20 graus no sentido horário:

Exemplo

div {
  transform: rotate(20deg);
}

Experimente você mesmo

Use valores negativos para rolar o elemento no sentido anti-horário.

O seguinte exemplo roda o elemento <div> em 20 graus no sentido anti-horário:

Exemplo

div {
  transform: rotate(-20deg);
}

Experimente você mesmo

Método scale()

Escalar

scale() Método para aumentar ou diminuir o tamanho do elemento (de acordo com os parâmetros de largura e altura fornecidos).

O seguinte exemplo aumenta o elemento <div> para o dobro da sua largura e três vezes a sua altura original:

Exemplo

div {
  transform: scale(2, 3);
}

Experimente você mesmo

O seguinte exemplo reduz o elemento <div> à metade da sua largura e altura original:

Exemplo

div {
  transform: scale(0.5, 0.5);
}

Experimente você mesmo

Método scaleX()

scaleX() Método para aumentar ou diminuir a largura do elemento.

O seguinte exemplo aumenta o elemento <div> para o dobro da sua largura original:

Exemplo

div {
  transform: scaleX(2);
}

Experimente você mesmo

Os seguintes exemplos reduzem o elemento <div> à metade da sua largura original:

Exemplo

div {
  transform: scaleX(0.5);
}

Experimente você mesmo

Método scaleY()

scaleY() O método aumenta ou diminui a altura do elemento.

O exemplo a seguir aumenta o elemento <div> para três vezes sua altura original:

Exemplo

div {
  transform: scaleY(3);
}

Experimente você mesmo

O exemplo a seguir reduz o elemento <div> à metade de sua altura original:

Exemplo

div {
  transform: scaleY(0.5);
}

Experimente você mesmo

Método skewX()

skewX() O método inclina o elemento ao longo do eixo X por um ângulo especificado.

O exemplo a seguir inclina o elemento <div> 20 graus ao longo do eixo X:

Exemplo

div {
  transform: skewX(20deg);
}

Experimente você mesmo

Método skewY()

skewY() O método inclina o elemento ao longo do eixo Y por um ângulo especificado.

O exemplo a seguir inclina o elemento <div> 20 graus ao longo do eixo Y:

Exemplo

div {
  transform: skewY(20deg);
}

Experimente você mesmo

Método skew()

skew() O método inclina o elemento ao longo dos eixos X e Y por um ângulo especificado.

O exemplo a seguir faz o elemento <div> inclinar 20 graus ao longo do eixo X, enquanto inclina 10 graus ao longo do eixo Y:

Exemplo

div {
  transform: skew(20deg, 10deg);
}

Experimente você mesmo

Se o segundo parâmetro não for especificado, o valor é zero. Portanto, o exemplo a seguir faz o elemento <div> inclinar 20 graus ao longo do eixo X:

Exemplo

div {
  transform: skew(20deg);
}

Experimente você mesmo

Método matrix()

Girar

matrix() O método combina todos os métodos de transformação 2D em um.

matrix() O método aceita seis parâmetros, incluindo funções matemáticas, que permitem que você gire, escale, mova (transladar) e inclinar o elemento.

Os parâmetros são os seguintes: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Exemplo

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

Experimente você mesmo

Atributos de transformação do CSS

A tabela a seguir lista todos os atributos de transformação 2D:

Atributo Descrição
transform Aplica uma transformação 2D ou 3D ao elemento.
transform-origin Permite que você mude a posição do elemento transformado.

Métodos de transformação 2D do CSS

Função Descrição
matrix(n,n,n,n,n,n) Definição da transformação 2D, usando uma matriz de seis valores.
translate(x,y) Definição da transformação 2D, movendo o elemento ao longo dos eixos X e Y.
translateX(n) Definição da transformação 2D, movendo o elemento ao longo do eixo X.
translateY(n) Definição da transformação 2D, movendo o elemento ao longo do eixo Y.
scale(x,y) Definir conversão de escalonamento 2D, alterando a largura e altura do elemento.
scaleX(n) Definir conversão de escalonamento 2D, alterando a largura do elemento.
scaleY(n) Definir conversão de escalonamento 2D, alterando a altura do elemento.
rotate(ângulo) Definir rotação 2D, especificando o ângulo nos parâmetros.
skew(ângulo-x,ângulo-y) Definir conversão de inclinação 2D, ao longo dos eixos X e Y.
skewX(ângulo) Definir conversão de inclinação 2D, ao longo do eixo X.
skewY(ângulo) Definir conversão de inclinação 2D, ao longo do eixo Y.